Create a Smooth Infinite Loop Image Carousel with Elementor Pro

Sdílet
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/...

Komentáře • 317

  • @ssadiq96
    @ssadiq96 Před 10 měsíci +2

    straight to point, glad i searched before implementing a custom slider and recreating the entire section, thank you so much !

  • @evanmatthews4097
    @evanmatthews4097 Před 3 lety +9

    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 😁

    • @ohzoe
      @ohzoe  Před 3 lety +2

      Hey Evan! Thanks for that mate. I wish I had more time to make more! Maybe one day :)

  • @alans3935
    @alans3935 Před 3 lety +2

    Very nice video Zoe. Short and straight to the point.

  • @designbookInc
    @designbookInc Před 4 měsíci

    You have the best tutorial format in youtube girl. Thanks a lot!

  • @ryan_hudson
    @ryan_hudson Před 2 lety

    Zoe! I knew you'd come to the rescue at some point! I needed exactly this and you saved me stuffing around! haha

    • @ohzoe
      @ohzoe  Před 2 lety

      Lol awesome, happy to save the day :P

  • @kevganhiga
    @kevganhiga Před 3 lety +1

    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.

    • @ohzoe
      @ohzoe  Před 3 lety +1

      Hey Kev! So glad it could help :) Mate, wish I had time to post more!!!

  • @kyori00
    @kyori00 Před rokem +4

    Always wanted to do this, thank you for the tutorial!

  • @dudewassup9237
    @dudewassup9237 Před 2 měsíci +1

    Right on Dude....Just what I was looking for thanks!

    • @ohzoe
      @ohzoe  Před 2 měsíci

      Chhurrrrrrrrrrrrrr!

  • @MetodasCo
    @MetodasCo Před měsícem

    This is super valuable content, congrats! Hope you're getting what you need from your branding because this is awesome.

  • @torreymoreno4070
    @torreymoreno4070 Před 3 lety +1

    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.

    • @ohzoe
      @ohzoe  Před 3 lety

      LOL happy to have helped x

  • @RomkeJellema
    @RomkeJellema Před 3 lety +2

    Oh, this is just great! Adds smoothness where it is very much needed. Thanks so much for sharing!!

    • @ohzoe
      @ohzoe  Před 3 lety +1

      Smooooooooooooooth

    • @RomkeJellema
      @RomkeJellema Před 3 lety

      @@ohzoe These 'small things' just make so much difference.

  • @andrewdowniephd
    @andrewdowniephd Před 2 lety

    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.

    • @ohzoe
      @ohzoe  Před 2 lety +1

      Oh awesome :) He's a good egg!

  • @clementyo4526
    @clementyo4526 Před 3 lety +2

    Hi, Zoe. You're my hero 😁 thank you. Awesome sharing.

  • @user-ij7iv7by4p
    @user-ij7iv7by4p Před rokem +1

    You're actually the best in the whole world, saving my butt!!!! THANK YOU!

  • @LeonardoBorsten
    @LeonardoBorsten Před 11 měsíci

    Absolutely brilliant. I have been struggling with this problem, and it never occurred to me to use a CSS rule. 🤩Thank you!

    • @ohzoe
      @ohzoe  Před 10 měsíci

      Glad it helped! Some times simple is best.

  • @joshuafidel8395
    @joshuafidel8395 Před 3 lety +2

    Exactly what I was looking for, thanks!

    • @ohzoe
      @ohzoe  Před 3 lety

      Glad I could help!

  • @sergeiiranzo481
    @sergeiiranzo481 Před rokem +1

    So easy and efficient, THANKS. I think this is the first time I leave a comment...

    • @ohzoe
      @ohzoe  Před rokem

      Woooo! So glad it was helpful.

  • @MuttaqiAliMuhammad
    @MuttaqiAliMuhammad Před 3 lety +1

    Wow thank you for this amazing tutorial. Carousel on another level!

    • @ohzoe
      @ohzoe  Před 3 lety

      You're very welcome!

  • @nasastar
    @nasastar Před rokem +1

    This was what exactly I was looking for! Thank you!

  • @faisalmahmudAnik
    @faisalmahmudAnik Před 3 lety +2

    Zoe, you are really awesome. Thanks for share your idea..........

    • @ohzoe
      @ohzoe  Před 3 lety

      No worries :) Hope it helps!

  • @jinu.freelance
    @jinu.freelance Před 2 dny

    Thank you for saving my time.

  • @hussainbharmal6383
    @hussainbharmal6383 Před 3 lety +2

    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 :-(

    • @ohzoe
      @ohzoe  Před 2 lety

      Glad it helped!

  • @truebossman957
    @truebossman957 Před 3 lety +1

    Please continue deliver you have best tips and explained very well

    • @ohzoe
      @ohzoe  Před 3 lety

      Naw, thanks so much!

  • @YAFONOOB
    @YAFONOOB Před 2 lety

    Thank you so much for sharing the code, it works exactly how I needed it to! YOU rock!

  • @vitaamedia1960
    @vitaamedia1960 Před 3 lety +1

    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 !

    • @ohzoe
      @ohzoe  Před 2 lety

      You're very welcome!

  • @MikeLikesThat
    @MikeLikesThat Před rokem

    Thanks! I didnt use this for the Image Carousel but I did for the Crocoblock Listing Grid.

  • @AichnerChristian
    @AichnerChristian Před 6 měsíci

    Very nice, still valid. Straight to the point - appreciate that.

  • @rudeboy4ru
    @rudeboy4ru Před 3 lety +1

    Thankyou so much for this information please make some more videos like this

    • @ohzoe
      @ohzoe  Před 2 lety

      Sure 😊As soon as I have some free time!!

  • @ramonsanchez5541
    @ramonsanchez5541 Před rokem

    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!!!

    • @ohzoe
      @ohzoe  Před rokem

      You’re welcome 😊

  • @xDwTz
    @xDwTz Před rokem +1

    Great tutorial, exactly what I needed

  • @soumweb2400
    @soumweb2400 Před 2 lety

    INSTANTLY SUBSCRIBED. Thank you for that CSS code!

    • @ohzoe
      @ohzoe  Před 2 lety

      Oh thank you!! Appreciate :)

  • @delfimarinkovicriera7548

    OMG, thank you so much. I've been trying to do this for months.

    • @ohzoe
      @ohzoe  Před rokem

      You're welcome!!

  • @justgosee
    @justgosee Před 3 lety +4

    Thank you! I tried and tried to make one of these a couple years ago and could never get it 'right'. You rock!!

    • @ohzoe
      @ohzoe  Před 3 lety +1

      You’re welcome!

  • @imkareem1600
    @imkareem1600 Před 3 lety +1

    Zoe back to the game!!! :)

    • @ohzoe
      @ohzoe  Před 3 lety +1

      Lawwwwd where have I been!

    • @imkareem1600
      @imkareem1600 Před 3 lety

      @@ohzoeI Don't know dear! your videos really rare and great! I thought you will publish more often :)... that's all... Thank you!

  • @kokyy32
    @kokyy32 Před rokem

    Awesome tutorial! Straight to the point. Thank you so much

  • @StephenrajAlexander-s4g
    @StephenrajAlexander-s4g Před 2 měsíci

    Thanks for it. It works perfectly

    • @ohzoe
      @ohzoe  Před měsícem

      Glad to hear that

  • @motobandit5345
    @motobandit5345 Před rokem +1

    THANK YOU

    • @ohzoe
      @ohzoe  Před rokem

      You're welcome D:

  • @luisinhomix
    @luisinhomix Před 5 měsíci

    You save me... i loveyou! thanks!!

  • @emilresentvig5014
    @emilresentvig5014 Před 3 lety +1

    Thx!

  • @elderevl
    @elderevl Před 2 lety

    thanks! i had been looking for this a long time

    • @ohzoe
      @ohzoe  Před 2 lety +1

      Glad I could help!

  • @a.p.7383
    @a.p.7383 Před 3 lety +1

    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!

    • @ohzoe
      @ohzoe  Před 3 lety

      Youre welcome!

  • @matheusborghi7873
    @matheusborghi7873 Před 2 lety

    Hi from Brasil! Was super easy and looks awesome in my project, thank u so much!

  • @amolsarker
    @amolsarker Před 3 lety +1

    Thanks!

  • @DirectAim
    @DirectAim Před rokem

    Great video Zoe, wish you had more tips, tricks and examples! Thanks for sharing!

    • @ohzoe
      @ohzoe  Před rokem

      Thanks :) I really should do more lol

  • @chrissbenitez
    @chrissbenitez Před rokem +1

    Thank you very much, this was so helpful

    • @ohzoe
      @ohzoe  Před rokem

      Glad it was helpful!

  • @ErnestoCCB
    @ErnestoCCB Před 3 lety

    Clear, simple, efficient. Thank you and thumbs up!

    • @ohzoe
      @ohzoe  Před 3 lety

      You're welcome! Glad it was helpful :)

  • @ocmomcollective989
    @ocmomcollective989 Před 2 lety +1

    Super helpful! Thanks so much!

    • @ohzoe
      @ohzoe  Před 2 lety

      You are very welcome!

  • @46_WOLF
    @46_WOLF Před rokem

    thank you for the tutorial

    • @ohzoe
      @ohzoe  Před rokem

      You're welcome 😊

  • @hazisharif4941
    @hazisharif4941 Před 2 lety

    Thank you so much for the CSS code!

  • @RealRobertFrancis
    @RealRobertFrancis Před 10 měsíci

    super valuable information!

  • @chillzy6752
    @chillzy6752 Před 3 lety

    Yay!, she posted a new video. Thanks for sharing

    • @ohzoe
      @ohzoe  Před 3 lety

      haha thanks mate!

    • @chillzy6752
      @chillzy6752 Před 3 lety

      @@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...

  • @atharkhan6806
    @atharkhan6806 Před 4 měsíci

    Thank you!!

  • @johnypress
    @johnypress Před 2 měsíci

    Thank you so much

  • @imbazohan1385
    @imbazohan1385 Před rokem

    thank u so much for shortcode

  • @ryanhoalt4521
    @ryanhoalt4521 Před 9 měsíci

    You're a lifesaver. Thank you!

  • @neelamgawande3804
    @neelamgawande3804 Před 8 měsíci

    Thanks a ton!!!!

  • @goochelaarvanbreda
    @goochelaarvanbreda Před rokem

    Thanks for this tutorial, everything looks way better now Zoë ;-)

    • @ohzoe
      @ohzoe  Před 10 měsíci

      You're welcome 😊

  • @rakibulhashanrabbi
    @rakibulhashanrabbi Před 3 lety +1

    To the point! nice!

    • @ohzoe
      @ohzoe  Před 3 lety

      Thanks :)

    • @rakibulhashanrabbi
      @rakibulhashanrabbi Před rokem

      @@ohzoe 2 Years Later watching this again!

    • @ohzoe
      @ohzoe  Před rokem +1

      @@rakibulhashanrabbi LOL love that! I really need to make more videos :)

  • @shubhampunj7802
    @shubhampunj7802 Před 2 lety

    Absolutely perfect, and doesn't even require elementor pro!

  • @AzaanJobsServices
    @AzaanJobsServices Před 7 měsíci

    Thanks for the custom code.

  • @ThankfulI
    @ThankfulI Před 2 lety

    Thank you for the code. Made life a lot easier.

  • @jimass
    @jimass Před rokem

    This is awesome thanks for the tutorial

  • @mattiasbruhn9890
    @mattiasbruhn9890 Před 5 měsíci

    Thanks!!! 😍

  • @muhammadkhalil4043
    @muhammadkhalil4043 Před 2 lety

    Really helpful to solve my problem. Thanks

  • @sidneyjohnson6895
    @sidneyjohnson6895 Před 2 lety +1

    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.

    • @ohzoe
      @ohzoe  Před 2 lety +1

      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!

    • @sidneyjohnson6895
      @sidneyjohnson6895 Před 2 lety

      @@ohzoe I will take a crack at it - Keeping you as a reference. Love ❤️ your style.

  • @tomlane4184
    @tomlane4184 Před rokem

    Create more Elementor content, this was great! Thanks

    • @ohzoe
      @ohzoe  Před rokem

      Thanks mate, appreciate it!

  • @Redo23
    @Redo23 Před 8 měsíci

    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"

  • @guitarinspiration9061
    @guitarinspiration9061 Před 3 lety +1

    Awesome, I really appreciate it🙌🏻

    • @ohzoe
      @ohzoe  Před 2 lety

      My pleasure 😊

  • @maximilianoperaita5256
    @maximilianoperaita5256 Před 8 měsíci

    Fantastic tutorial. THX!

  • @get8bit
    @get8bit Před 2 lety

    Great tutorial! Simple, fast, and effective!

  • @JasonJJK
    @JasonJJK Před 7 měsíci

    thank you very much

  •  Před rokem

    Thank you

  • @hadifirouzi7202
    @hadifirouzi7202 Před 11 měsíci

    Thanks for this great tutorial. ❤

    • @ohzoe
      @ohzoe  Před 10 měsíci

      Glad it was helpful!

  • @webmagix
    @webmagix Před 17 dny

    Super!

  • @paulburgess4954
    @paulburgess4954 Před 10 měsíci

    Fantastic! Thank you so much!

  • @designswww
    @designswww Před 2 lety

    Wow, you are amazing. Thank you!

  • @gabrieles02
    @gabrieles02 Před měsícem

    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.

    • @ohzoe
      @ohzoe  Před měsícem

      take off padding and go edge to edge :) This tutorial doesn't cover adding transparency to the carousel or gradient overlay to edges!

  • @ohb1512
    @ohb1512 Před 2 měsíci

    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?

    • @ohzoe
      @ohzoe  Před měsícem

      You can definitely apply the same principle to other sliders that use the same library! might need to adjust the css tho

  • @Woodypa
    @Woodypa Před 5 dny

    Hi thanks for the video, it seems to work. But after a few seconds the carousel stops. Do you know why it happens? Thanks ;)

  • @kashifahmad6739
    @kashifahmad6739 Před 2 lety

    Thanks, Alot!
    You saved my time :)

  • @abzzw
    @abzzw Před 2 lety

    Thank you soo much for making this video. really helpful great video. Many thanks

    • @ohzoe
      @ohzoe  Před 2 lety

      Youre welcome!

  • @hariszubair
    @hariszubair Před rokem

    Thanks Sir You Solved my Problem Respect

  • @matthewconnell9326
    @matthewconnell9326 Před rokem

    Very helpful - thanks!

  • @crisprotacio
    @crisprotacio Před rokem

    thank you so much for this content

  • @lisaodellia1
    @lisaodellia1 Před 5 měsíci

    beautiful thank you!

  • @richardplayfair3692
    @richardplayfair3692 Před 2 lety

    Massive help - thank you

  • @MuhammadImran-cq5le
    @MuhammadImran-cq5le Před 27 dny

    Can we use different companies' logos on our website without permission?

  • @elinemill2771
    @elinemill2771 Před 3 lety +1

    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?

    • @ohzoe
      @ohzoe  Před 3 lety

      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 :)

  • @heartbreakradio1440
    @heartbreakradio1440 Před 3 lety

    LIFE SAVER!!!! THANK YOU

  • @raffiffauzy1629
    @raffiffauzy1629 Před rokem

    thanks

  • @torreymoreno4070
    @torreymoreno4070 Před 3 lety +1

    How would I do this if I wanted to do it with the Testimonial slider or Posts slider?

    • @ohzoe
      @ohzoe  Před 3 lety +1

      Similar way I guess! You'd need to maybe poke the CSS and grab the right selector.

  • @rakibulhashan5446
    @rakibulhashan5446 Před rokem

    Thanks, nice and to the point

  • @RaeStanton2481
    @RaeStanton2481 Před rokem

    Brilliant, thank you!

    • @ohzoe
      @ohzoe  Před rokem

      Glad it was helpful!

  • @HiroiSekai
    @HiroiSekai Před 3 lety +1

    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?

    • @ohzoe
      @ohzoe  Před 3 lety +1

      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!

    • @HiroiSekai
      @HiroiSekai Před 3 lety

      @@ohzoe Thanks! I have nothing else running except Elementor and Elementor Pro, along with Akismet. Not sure where the conflicting issue is coming from 😩

    • @ohzoe
      @ohzoe  Před 3 lety

      @@HiroiSekai All up to date? Send link :)

    • @HiroiSekai
      @HiroiSekai Před 3 lety +1

      @@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!

  • @sylvias.3380
    @sylvias.3380 Před rokem +1

    Thank you

    • @ohzoe
      @ohzoe  Před rokem

      It's an option on the widget!

  • @baptistedebels8987
    @baptistedebels8987 Před 2 lety

    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 !!

    • @ohzoe
      @ohzoe  Před 2 lety

      LOL I feel called out!! You're so right, Ill try make one soon! Anything you'd like?

  • @headwestify
    @headwestify Před 2 lety

    Nifty trick, thanks Zoe

    • @ohzoe
      @ohzoe  Před 2 lety

      You're so welcome! I use it weekly :)

  • @faner1992
    @faner1992 Před 2 lety

    Girl, you are the best :)

  • @abzz1290
    @abzz1290 Před 2 lety

    Great video, liked and subscribed Please continue making awesome videos like that. ;)

    • @ohzoe
      @ohzoe  Před 2 lety

      Thanks for the sub!

  • @hptripathi
    @hptripathi Před 2 lety +1

    You are awesome.