Autoscroll Carousel Infinite Loop - Logos - Elementor Wordpress Tutorial

[@nameerah7588]

literally you are the bestest teacher ever. been learning alot of things from you!!!!!!!!!!!!!!!!

[@websquadron]

Wow, thanks!

[@foggypoggy1]

Oh man, You just saved me, I was struggling with it and searched on KZbin and gotcha~~~

[@Alex_87878]

What a mad lad, always producing quality content, thanks a lot.

[@websquadron]

Always

[@cocoethan1161]

I'll definitely use this on my next project. Cheers mate!

[@bobbyryandra]

Hi Imran, thanks alot for the video. From Bobby in Bekasi - Indonesia

[@shakilhussain613]

I was looking for it. Excellent. Many Thanks.

[@OliveShamon]

Worked like a charm. Thank you sir!

[@bebuulab1054]

oh boy thank you really so much as always you are great man! Keep it up!!!!!

[@SimonSays07]

Great video! thanks! I was wondering how i can make sure the logo's are middle aligned on the horizontal axes. Now they are all aligned to the top.

[@websquadron]

Click on the advanced tab and select middle

[@SimonSays07]

@@websquadron It only allows me to change the vertical axes

[@zarzawiki]

Thank you, It was just what I was looking for!

[@m-soundstheproducer]

Can you paste the css code that is needed around 05:22 here in the comments?

[@websquadron]

[@angeclement8074]

A big thank you from France !!

[@websquadron]

You're welcome!

[@EmanueleMandolfo]

Hi, is it possible to remove the option to stop it and change the direction by mouse hover/click? I mean the thing you do at time 0:20. Thanks

[@websquadron]

The only way I can change it is to drag with my mouse the other way, but automatically not sure about that. I'll need to think about that.

[@EmanueleMandolfo]

@@websquadron sorry I haven’t explain myself 😅 I meant to disable this option at all, not to change the direction. I don’t want that visitors of the website can do the thing you show at time 0:20.

[@paulvanyork]

Thanks for this! Is there a way to set a link to external URL for each image?

[@mamandapanda185]

This is so awesome. I didn't want to download a plug in or do any more code than what you demo'd.

[@inderpreetsingh8585]

Thanks imran, happy diwali

[@websquadron]

Thanks! You too!

[@Peebals]

Hapy Diwali inderpreet singh G hope you are doing well in your life

[@wweuncut171]

hey how to change its direction ?

[@Jason_1010]

That's good Imran and useful tip about adding the URL into the content. I found that PSI message about image sizes so frustrating.

[@websquadron]

Yup - it always annoyed me.

[@saeedkhanjani3020]

Thank you so much. I wonder how to fade the edges. for better look. Please teach how to do that.

[@websquadron]

That video comes out soon

[@edgarlacson]

You said start from the scratch, but you didn't show how you come up with that black element or block with logo inside. :(

[@clevermissfox]

I’m trying to do this with the loop carousel but even w a linear timing function it’s staccato; starts and stops because there are inline styles from elementor with transition duration of 3500 or whatever you set then the inline styles set to 0, then adjusts its translate 3D calculation and the duration changes back to 3500 then back to 0 where it pauses .

[@websquadron]

Elementor have introduced a new feature to handle the marquee style now

[@clevermissfox]

@@websquadron even with loop items ? What is the feature/widget called?

[@websquadron]

@@clevermissfox WordPress > Templates > Floating Elements > Floating Bars

[@clevermissfox]

@@websquadron thanks ill check it out! Appreciate the tip

[@FantasyCouch]

Thank you for this! Everything works great except when a new image is being brought onto the screen, it initially loads blurry, and then a second or 2 later it loads and is not blurry any more. Maybe it's one of my image optimization plugins? I tried turning lazyload on/off and it still does this :(

[@FantasyCouch]

Yup that was it. I deactivated the "Image optimization service by Optimole" plugin and it fixed the problem. I'll just use another image optimization plugin that I've used before

[@websquadron]

Better to add in the WebP natively :) Glad you got there.

[@neilessays]

Hello! Great explanation, and it worked. But here is the problem that I identified, that my Caurasal doesn't move by itself unless I drag it once and then auto play happens. Is there anything I am doing wrong? I even worked on the CSS part, but that doesnt seem help too

[@websquadron]

Have you got any optimisation applied that is preventing the CSS?

[@stanzin.tundup]

Amazing 🤩 Thankyou

[@obidikepaschal4484]

Thank you, the video and the CSS code was very helpful

[@saz8421]

Do you know if it's possible to reverse the direction of the carousel? What would the CSS look like for this?

[@Rob-q4f3d]

Did you find the solution?

[@allanantang9062]

great content. thank you.

[@bbruno1973]

interesting -- i cannot seem to make it work. It scrolls and works for a bit than it stops. Its the infinite part thats an issue. And I have no idea why. It will scroll all the way through but wait till all show before the next one loads. Not sure if there is a conflict somewhere with the infinite scroller? What I mean is 6 logos scroll and the infinite does not start again until 6 has left the screen.

[@websquadron]

How many slides are you showing? And have you set it to show that. So if you have 6, the slides in the setting should be 6.

[@bbruno1973]

@@websquadron yep. In fact, I can make it work for a bit, then it reverts back. The infinite scroller seems to be the issue. I have 6 slides. This tutorial has 7 slides but only shows 5 and it seemed to work perfectly. I can set it up, save it. Refresh the page. Its working. Go to another page, its not working. And then back to the original page, no longer working. This is not a site I built so elementor is not my choice of a builder. Any ideas?

[@davidspot191]

how is it possible to make the left and right carousel container fading off or blurred?

[@websquadron]

Add this to the Custom CSS for the Caorusel: /* Ensure the carousel container is correctly targeted */ selector { position: relative; /* Ensure the pseudo-elements are positioned relative to the carousel container */ overflow: hidden; /* Ensure content does not overflow */ } selector::before, selector::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; /* Fade width */ pointer-events: none; z-index: 1; } selector::before { left: 0; Z-index: 2 !important; background: linear-gradient(to right, white, transparent) !important; } selector::after { right: 0; background: linear-gradient(to left, white, transparent) !important; }

[@brentfabian4691]

Thanks a lot! Only one issue..when it scrolls to the beginning of a new logo it will stop for a millisecond causing it to be a little choppy. How do I resolve that?

[@websquadron]

What speed have you got it set to?

[@brentfabian4691]

Transition duration is on 3500 and autoplay speed set to 0. I've tried the transition duration at 3000 and 3800 as well, it still creates this split second stop when it scrolls to the beginning of a new logo @@websquadron

[@silverdolla101]

Thank you for helping my carousel have swag! LOL

[@websquadron]

Any time!

[@77krikke77]

Any idea on how to change the sliding direction? I would also like one that slides from left to right. A combo of two sliders in opposite directions would look great imo. Thanks for the original video, it is much appreciated!

[@websquadron]

I had a solution to L to R, but that doesn't work now.

[@77krikke77]

@@websquadron thank you for replying sir. Let's hope a 'fix' will come. 👍

[@wweuncut171]

​@@77krikke77hey did you find any way to change it's direction ?

[@77krikke77]

@@wweuncut171 No...

[@timvankoningsbruggen5962]

use image carrousel instead, use the same css as the video and it should work, image carousel has a build in button to change direction @@wweuncut171

[@ryanjd2826]

Thanks man. Weird because the image keeps showing only one image per view even though I clearly configured 5 same in the video

[@websquadron]

Difficult to help without a 1-2-1

[@felixrivera2691]

Can a testimonial slider be vertical instead of horizontal? Is there a code snippet to achieve this effect? Thank you, Imran.

[@websquadron]

This is tricky and I'm still looking at this.

[@JudithAgada]

It's not working for me, it worked in the editor but it is not working on the live website, how do I sort this out?

[@websquadron]

Are you getting console issues? JS issues? Any optimisation affecting it? I can't diagnose the cause without seeing your site as part of a 1-2-1.

[@LineLovless]

Great tutorials as always! Is there any way to make the "Slides per view" responsive, so it changes based on the View Width, as we have very varying widths? E.g. My image is 100px with a padding of space between of 50px If my viewport is 1000px wide I can fit around 7, but if my viewport is 2000px wide, I can fit 14.

[@websquadron]

Good question. Let me check and get back to you.

[@StanleyChinaLoi]

If I right-click and save the WordPress or Elementor logos, can I get in trouble because it's not copyright-free?

[@websquadron]

You're just showcasing what you use - so as long as you're using their logos - then that is free marketing for the company, otherwise you could say that any photograph where someone is wearing Nike clothing is breaching copyright too.

[@StanleyChinaLoi]

@@websquadron Ok ...sounds logical indeed...Thanks! As a starter with my business, I'm a little careful with stuff but thanks for the info!! Beneficial videos! Learning a lot from you!!

[@macarthurweb]

Hi Imran I've just followed your tutorial thank you it works pretty well. I'm having an issue though the images/items in the testimonial carousel are stacked vertically instead of horizontally. Not sure what's wrong? I'm using a flexbox container rather than columns & sections - would that be it? I've checked every possible setting and copied the CSS so not sure what I've done wrong.

[@websquadron]

Are you adding the images to separate slides in the carousel?

[@macarthurweb]

@@websquadron yes separate slides

[@rahulprasadgupta479]

mind blowing stuff!

[@fullmetalalgorist]

Just in case anyone spends two hours on this like me: If your logos are disappearing after the first scroll through add class="skip-lazy" after img but before src in the img html code. This disables lazy load (which was broken regardless of the lazy load toggle being switched) and fixes the problem. Phew

[@fullmetalalgorist]

**Update, this error was coming from the Jetpack Lazy Load feature so disabling this in Jetpack depending on your setup is another fix.

[@lissasimpson1020]

Very newbie here - working on an intern project. I can't thank you enough for this tutorial - very easy to follow and have everything working but I can't seem to get the title above the carousel - will only sit to the side?

[@websquadron]

Hi. Set the Layout to be Image Above.

[@lissasimpson1020]

@@websquadron Thank you so much - but that doesn't move the section title above the carousel like you have it (Over 37 years experience......) I used Layout Image Above for logo and name which is working perfectly

[@nanetu]

is it possible with that to have pause on hover and to work?

[@websquadron]

Yes, you can still have the pause on hover.

[@nanetu]

@@websquadron I have that problem soo i have 6 slides to show and i want pause on hover if i have slides to scroll to 1 until this 1 come in view, i cant stop animation and pause on hover.But i need that

[@varshigamer-uk8ln]

​@@nanetuyes even for me it is not stopping on hover immediately, it is stopping after sometime not immediately. can you help me if you find the solution

[@lkmaggs]

This is exactly what I'm after. Is it possible to include a transparent effect to the left and right margins to give a soft line?

[@websquadron]

Potentially yes with some overlap of an image on the left and right

[@natali7804]

​@@websquadron как это сделать?

[@visualmodo]

Really good work!

[@learndigitalskills8932]

Thank you

[@rashone748]

Can you show in WP exactly which plugin you have installed?

[@websquadron]

How does that relate to this video?

[@rashone748]

@@websquadron The plugin I installed(Testimonial Carousel For Elementor) has a very strange interface and there are no options that you show in the video.I'm new to WP and it would make it easier for me to follow the tutorial.

[@JoshyGambles]

Great tutorial, mine is now sliding to the left, is it poossible to make it slide to the right?

[@websquadron]

Try adding this: direction: rtl;

[@wweuncut171]

​@77krikke77 hey did you find any way to change it's direction ?

[@stephencosco]

thanks for this! one question - how do you add links to images & text in the slider?

[@websquadron]

Modify the img code to become:

[@stephencosco]

@@websquadron You're the best. Is there any way to specify a specific width in between images with css? The "space between" slider in the style settings seems to be percentage based - it's adding lots of blank space in between elements as the screen size increases, especially on a larger monitor.

[@kevindarian247]

Is there a plugin to achieve this same result because I use the divi theme.

[@websquadron]

Could try using the css to apply to a divi carousel

[@krownmedia9823]

I followed step by step but for some reason the logos appear all on one slide on top of each other instead of side by side. they then slide all together to reveal another vertical line of logos. Please help!

[@websquadron]

What settings have you added? Difficult to be sure without a 1-2-1

[@workwithdarvin]

can you add targer URL each logo?

[@websquadron]

You good yes as they are components

[@haseebliaqat9468]

I am unable to show the images via media links, if I add the image it is added for the name icon.

[@websquadron]

Difficult to assess without a 1-2-1

[@Smartsneed]

❤❤❤great 👍

[@MarktheAirsoftPrimate]

Any plugins available that’s not elementor that can do the same thing?

[@websquadron]

There's lots of other plugins but I prefer to use EL Pro.

[@muhammadmaaz6119]

Hey firstly thanks for your elementor solution but I want one testimonial left or one is right ??

[@websquadron]

To go in opposite directions?

[@MrPeterninyo]

Hi, im having trouble to locate the web address for the image in my media library. Please help me

[@websquadron]

Check your Media Library

[@umaagrawal1417]

Bro if i want to change the direction how can i do that

[@websquadron]

You need to use the Elementor Carousel widget. It's in there.

[@natali7804]

Почему когда картинки заканчиваются, карусель останавливается и начинает в другую сторону работать?

[@natali7804]

Пожалуйста, скажите, как убрать границы по краям, чтобы прозрачные были. А то видно как появляется из границы.

[@hanna5528]

add an empty container after the carousel, fill background with gradient from solid to transparent, set position to absolute and align to the left, set height to 100%, set z-index to 1. the gradient will be on top of the carousel and it will look like it blends into the background. duplicate the same container to cover the right side

[@fulekipeter]

The video is really good, it helped a lot. How can I reduce the empty space between the elements in terms of width?

[@websquadron]

Reduce the padding :) Or crop the images

[@scottheliker6444]

Excellent

[@cassandrad07]

When I use this, the logos that aren't initially shown (I have 10 logos and show 5 and then scroll the rest) they fade in while they scroll onto the screen. Anyway to remove this?

[@websquadron]

Have you tried decreasing the transition time and are the images a large file size?

[@cassandrad07]

@@websquadron I tried decreasing the transition time but didn't help. All my images are under 100kb. Does it matter that I am using .png files?

[@cassandrad07]

This also only seems to be happening when I view it either incognito or not logged in. When I am logged it in loads correctly

[@websquadron]

@@cassandrad07 Can you share a URL?

[@osamakabir8517]

thanks for the video...really helpful..🤩

[@hsbrasil8565]

Thank you! Helped a lot, appreciate!

[@MFX-Trading]

I wont get the full image, just the round small standard image

[@websquadron]

Sorry, what do you mean?

[@MFX-Trading]

@@websquadron When I put in the code or picture, it gives me a small round cut out. Not the full logo. Cant seem to get the full logo whatever I try

[@AO85]

under style - image you can set the Border Radius to 0

[@MFX-Trading]

@@AO85 still not getting the full image tho

[@AO85]

@@MFX-Trading hmm - that happened to me when i placed it as image but worked fine as code! Mine got cut off on the left and right side, Don’t know why though. How did you save your logos?

[@wweuncut171]

how can i use this same code for loop carousel ?

[@websquadron]

I did a video on the codes for that. I need to dig it out

[@xancez1]

Awsome video! But, i was wondering if you could let me know how to set the slider to move to the right instead of going to the left? I think it's going to look lovely if i have 2 sliders; 1 at the top moving to the left and 1 at the bottom moving to the right. I wish u can help. thanks

[@websquadron]

That’ll need some custom JS

[@ashman123456789]

use image carousel add the code :) worked for me

[@wweuncut171]

hey did you find any way to change it's direction ?

[@techtalks003]

Much thanks from here

[@newtrinohair]

Thank you so much! Such a great help! :D

[@SimonG23oo]

Thank you so much for an awesome tutorial! Is there any way to change the sliding direction on scroll? Like if I want it to move from left to right when I scroll down, but in the opposite direction when I scroll up?

[@websquadron]

No. Will need some custom JS and I have struggled with that.

[@shotbyrima]

@@websquadron Hi Web Squadron, and is there a way to make it just slide in the other direction? Just from left to right?

[@wweuncut171]

​@@shotbyrima​ hey did you find out aby way to change it's direction ?

[@timvankoningsbruggen5962]

use image carousel and use the same css as in the video. image carrousel has a build in button to change direction and it should work@@shotbyrima

[@flyally632]

How to make it so that it’s not scrolling left and right but fading inward effect in an infinite loop?

[@websquadron]

That would need some thought regarding the css

[@ciprianrelitchi8272]

Hello! The slider is not working in mobile. The loop won't work. Any solution?

[@websquadron]

It works for me - see https;//websquadron.co.uk Could be based on your page or other optimisation.

[@wotevermajorlooser]

For some reason when I try to do that, the image doesn't show

[@websquadron]

Are you using any optimisation plugins or snippets?

[@wotevermajorlooser]

@@websquadron Not that I'm aware of

[@websquadron]

@@wotevermajorlooser Best to check. And if you add an image to the carousel without using my code does it still not work?

[@arturo5050]

This replace the marquee??

[@websquadron]

Yup :)

[@basselalzaim4705]

Some amazing content! How can we make the same but vertical? not horizontal

[@websquadron]

I had a solution for this, but on the mobile it looked horrendous so still experimenting.

[@mirza1859]

Thanks

[@lakinen_69]

Great. Very simple solution that works well. Though I think it needs a few more tweaks in Elementor regarding the responsive view (slides per view) on screen (5 on desktop like in the video, and maybe 4 on tablet, and 2 or 3 on mobile). Maybe you've mentioned that in the video, I was watching in the office without a sound, sorry. :)

[@websquadron]

Don't worry :) Of course, refine for the devices.

[@lakinen_69]

@@websquadron also, regarding these logos, was it not easier to add a class on them, and then use filter: grayscale(1) to make them black and white?

[@bren8k]

How to make images as a link?

[@websquadron]

Add an image and then add the hyperlink

[@CDGMR1]

I need help from scratch

[@websquadron]

Do you need to book a 1-2-1?

[@needonlymoney]

thnks bro

[@franh90p67]

if i want the testimonial run left to right how is??

[@websquadron]

Try this in the CSS: direction: rtl; Maybe....

[@adityamishra7711]

how to reverse the direction ? anyone please .....

[@macdeesh]

selector{ direction: rtl; }

[@anonymousf454]

Do you need permission to have the companie logos on your website like this?

[@websquadron]

Not really - because your logos could be affiliate links, or companies that you've supported or worked with. It's like some people putting Google Logos on even though they just use the products.

[@anonymousf454]

​@@websquadronI dont know if I would be considered an affiliate or a supporter. The companies are auction houses, and I am a licensed wholesaler, so I do use the companies to source inventory. But I have no official business connection to most of them, other than being registered to bid through their sites.

[@ayushmj]

🔥

[@maimoonaghani3355]

It's a pro feature

[@websquadron]

Yup my videos are always Pro

[@maimoonaghani3355]

@@websquadron okay

[@bardhosmani9423]

is this guy doing marketing for canva pro?

[@websquadron]

No??

[@waresulahammad]

You design is good. But it is hard for learning new person. Because you didn't make this slider from sketch.

[@websquadron]

I explained it

[@chittaingga]

VAI YOU ARE INDIAN SO PLZ YOUR ENGLISH IS VERY .....PLZ YOU CLEARLY YOUR FLUENT.....

[@websquadron]

Well I was born in Britain…

[@jasonhebert1656]

No good. Dont' use this if you ever expect your client to do anything with it afterwards. bad hack

[@websquadron]

How is this a bad hack?

[@jasonhebert1656]

@@websquadron it’s not useable for a client. Even though it’s not complex code I can’t hand over a project that requires them to code anything if they wanted to add a logo. If it was just my own site it’s fine. That’s all

[@kani_mar]

How do you add individual hyperlinks to the logos themselves?

[@torunamediagroup3461]

thank you