Create a Smooth Infinite Loop Image Carousel with Elementor Pro
Vložit
- čas přidán 12. 09. 2024
- Learn how to create a super smooth, infinitely looping Image Carousel using Elementor Pro and a tiny bit of custom css! Use it to show case client logos, your own work or any other type of image you want to sliiiiiiiiide across the screen.
Want the code? Here it is:
selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
▸ Templates - www.visualtoni...
▸ Hire Me - www.visualtoni...
Grab yourself a copy of the kick ass plugins used in this tutorial!
▸ Elementor Pro - elementor.com/...
straight to point, glad i searched before implementing a custom slider and recreating the entire section, thank you so much !
Thanks for sharing!
As someone who is proficient in the elementor basics, I'm always looking for ways to go outside the box, and your content hits the spot every time. I only wish you made more videos 😁
Hey Evan! Thanks for that mate. I wish I had more time to make more! Maybe one day :)
Very nice video Zoe. Short and straight to the point.
Cheers!
You have the best tutorial format in youtube girl. Thanks a lot!
Ty!
Zoe! I knew you'd come to the rescue at some point! I needed exactly this and you saved me stuffing around! haha
Lol awesome, happy to save the day :P
Thank you! A cliented wanted this on her site and i didn't know how to implement it. Your videos are the best. I hope someday you post more videos.
Hey Kev! So glad it could help :) Mate, wish I had time to post more!!!
Always wanted to do this, thank you for the tutorial!
Right on Dude....Just what I was looking for thanks!
Chhurrrrrrrrrrrrrr!
This is super valuable content, congrats! Hope you're getting what you need from your branding because this is awesome.
I FUCKING LOVE YOU. Ive been trying to figure out how to do this for a while now. My clients will be so pleased. Thank you endlessly.
LOL happy to have helped x
Oh, this is just great! Adds smoothness where it is very much needed. Thanks so much for sharing!!
Smooooooooooooooth
@@ohzoe These 'small things' just make so much difference.
Hi, I was watching Imran's video on Scrolling Text and he mentioned you had done something regards scrolling images. It's something I want to do on a client site, so here I am a new subscriber.
Oh awesome :) He's a good egg!
Hi, Zoe. You're my hero 😁 thank you. Awesome sharing.
haha thanks
You're actually the best in the whole world, saving my butt!!!! THANK YOU!
Absolutely brilliant. I have been struggling with this problem, and it never occurred to me to use a CSS rule. 🤩Thank you!
Glad it helped! Some times simple is best.
Exactly what I was looking for, thanks!
Glad I could help!
So easy and efficient, THANKS. I think this is the first time I leave a comment...
Woooo! So glad it was helpful.
Wow thank you for this amazing tutorial. Carousel on another level!
You're very welcome!
This was what exactly I was looking for! Thank you!
Zoe, you are really awesome. Thanks for share your idea..........
No worries :) Hope it helps!
Thank you for saving my time.
I am facing exactly the same issue and this was spot-on! Thank you so much. Just wish I could do it with Elementor Free to test it out :-(
Glad it helped!
Please continue deliver you have best tips and explained very well
Naw, thanks so much!
Thank you so much for sharing the code, it works exactly how I needed it to! YOU rock!
Thank you very much for this generous and useful tutorial.
Finally I was able to solve my problem and implement a very fluid scrolling ;-)
Very practical snipet! Much appreciated !
You're very welcome!
Thanks! I didnt use this for the Image Carousel but I did for the Crocoblock Listing Grid.
Very nice, still valid. Straight to the point - appreciate that.
Thankyou so much for this information please make some more videos like this
Sure 😊As soon as I have some free time!!
Hi Zoe .. thanks .. you basically save me a lot of time .. my website looks great right now .. I was looking for other tutorials .. but this one fit perfectly!!!
You’re welcome 😊
Great tutorial, exactly what I needed
INSTANTLY SUBSCRIBED. Thank you for that CSS code!
Oh thank you!! Appreciate :)
OMG, thank you so much. I've been trying to do this for months.
You're welcome!!
Thank you! I tried and tried to make one of these a couple years ago and could never get it 'right'. You rock!!
You’re welcome!
Zoe back to the game!!! :)
Lawwwwd where have I been!
@@ohzoeI Don't know dear! your videos really rare and great! I thought you will publish more often :)... that's all... Thank you!
Awesome tutorial! Straight to the point. Thank you so much
Thanks for it. It works perfectly
Glad to hear that
THANK YOU
You're welcome D:
You save me... i loveyou! thanks!!
Thx!
thanks! i had been looking for this a long time
Glad I could help!
thank you SO much for this CSS code.. this is exactly what i was looking for. i am building my portfolio landing page with a big endless slide of my works to showcase. i really needed this for it to look more dynamic. i wish there was a way to use the mouse hover option to speed up the transition time when you move your mouse to the left or right side of the screen. i'm sure it can be done but i'm new to website making so i don't know how to write code. but this is great already, thanks a lot!
Youre welcome!
Hi from Brasil! Was super easy and looks awesome in my project, thank u so much!
Thanks!
Great video Zoe, wish you had more tips, tricks and examples! Thanks for sharing!
Thanks :) I really should do more lol
Thank you very much, this was so helpful
Glad it was helpful!
Clear, simple, efficient. Thank you and thumbs up!
You're welcome! Glad it was helpful :)
Super helpful! Thanks so much!
You are very welcome!
thank you for the tutorial
You're welcome 😊
Thank you so much for the CSS code!
super valuable information!
Yay!, she posted a new video. Thanks for sharing
haha thanks mate!
@@ohzoe umm hy Zoe. Could you please share this template if you still have it. Everytime I apply the css code mine gets all messed up. Do you think the class(swiper wrapper) has changed or does it still work fine on your end with the current version of elementor...
Thank you!!
Thank you so much
thank u so much for shortcode
You're a lifesaver. Thank you!
Thanks a ton!!!!
Thanks for this tutorial, everything looks way better now Zoë ;-)
You're welcome 😊
To the point! nice!
Thanks :)
@@ohzoe 2 Years Later watching this again!
@@rakibulhashanrabbi LOL love that! I really need to make more videos :)
Absolutely perfect, and doesn't even require elementor pro!
Wooo!
Thanks for the custom code.
Thank you for the code. Made life a lot easier.
Welcome!
This is awesome thanks for the tutorial
Thanks!!! 😍
Really helpful to solve my problem. Thanks
Zoe, I am new here and I love your intro! Did you do it yourself? Where can I get one like that! Also, thanks for an amazingly great tutorial - it works like a charm.
Yo! Thanks so much :) I am no video pro haha, I grabbed a template, a stock audio file, some video clips and just had a crack in after effects!
@@ohzoe I will take a crack at it - Keeping you as a reference. Love ❤️ your style.
Create more Elementor content, this was great! Thanks
Thanks mate, appreciate it!
If you want to do this with the free version just add the code to the Appeareance > Additional CSS > [PASTE CODE]
Make sure to remove the word "selector"
Awesome, I really appreciate it🙌🏻
My pleasure 😊
Fantastic tutorial. THX!
Great tutorial! Simple, fast, and effective!
Thanks :D
thank you very much
Thank you
Thanks for this great tutorial. ❤
Glad it was helpful!
Super!
Fantastic! Thank you so much!
Wow, you are amazing. Thank you!
Great video! I am struggling to find how to make the edges fade.. Right now the logos cut out pretty abruptly when they get to the edge of the container.
Pretty sure it requires more custom CSS, but whatever I'm trying to do is simply not working.
take off padding and go edge to edge :) This tutorial doesn't cover adding transparency to the carousel or gradient overlay to edges!
I have this working perfectly, thank you so much!
I'd love to integrate video into this, therefore I need to use the media carousel. Have you created any code to make this work in the same way?
You can definitely apply the same principle to other sliders that use the same library! might need to adjust the css tho
Hi thanks for the video, it seems to work. But after a few seconds the carousel stops. Do you know why it happens? Thanks ;)
Thanks, Alot!
You saved my time :)
Thank you soo much for making this video. really helpful great video. Many thanks
Youre welcome!
Thanks Sir You Solved my Problem Respect
Very helpful - thanks!
thank you so much for this content
beautiful thank you!
Massive help - thank you
yw!
Can we use different companies' logos on our website without permission?
Unfortunately it doens't work well for me. Sometimes nothing moves at all, sometimes the row of images freezes after a few seconds. Can anyone help me with this problem?
Mmmm I just tested and it's working fine for me. Wonder if you have any other plugins installed with some JS that is conflicting. Try disabling :)
LIFE SAVER!!!! THANK YOU
woooo!
thanks
How would I do this if I wanted to do it with the Testimonial slider or Posts slider?
Similar way I guess! You'd need to maybe poke the CSS and grab the right selector.
Thanks, nice and to the point
Brilliant, thank you!
Glad it was helpful!
Thank you kindly for sharing this! Got everything to work nicely, but after each slide scrolls past, there seems to a tiny little jitter, like the slider realizes it has scrolled through the list and refreshes itself. Occasionally it'll even flicker white on the edge doing this. Have you seen this before by chance?
Hmmm no! Maybe see if you have another plugin installed that is conflicting? I think it uses Swiper JS so sometimes if two scripts are loading there can be issues!
@@ohzoe Thanks! I have nothing else running except Elementor and Elementor Pro, along with Akismet. Not sure where the conflicting issue is coming from 😩
@@HiroiSekai All up to date? Send link :)
@@ohzoe Hey sorry, we're just switching hosting sites and the domain transfer's been stuck. Will reply again once an example can be posted. Thank you, much appreciated!
Thank you
It's an option on the widget!
Hi Zoe ! Just find your channel, really loooooooove your contents ! Thanks a lot for sharing ! But I see there is a while since your last video, the channel is over ? Wish you the best and thanks again !!
LOL I feel called out!! You're so right, Ill try make one soon! Anything you'd like?
Nifty trick, thanks Zoe
You're so welcome! I use it weekly :)
Girl, you are the best :)
Great video, liked and subscribed Please continue making awesome videos like that. ;)
Thanks for the sub!
You are awesome.
YOU ARE!