Elementor smooth infinite loop image carousel - FREE & PRO options

Sdílet
Vložit
  • čas přidán 5. 09. 2024

Komentáře • 130

  • @mgilbrtsn
    @mgilbrtsn Před rokem +6

    Also, wanted to say that I like your presentation. Quick and to the point. A lot of these take 20 minutes for something that should be 5.

  • @ashleighwilson4288
    @ashleighwilson4288 Před 5 měsíci +2

    First video comment ever...thanks for this. No messing around, straight to the point, easy step by step. First one I came across that hasn't been swings and roundabouts! Will be subscribing

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

      You are very welcome 🤓 yeah, I hate the swings and roundabouts so I try to minimize them as much as possible :)))

  • @tobiwebdev826
    @tobiwebdev826 Před 5 měsíci +4

    GREAT, just implemented it and I love the outcome!

  • @redwan_lmati
    @redwan_lmati Před měsícem +2

    Thank you! Exactly what I needed

    • @andreaegli
      @andreaegli  Před měsícem +1

      You’re welcome 🤘🏻🥳

  • @creativesaadi
    @creativesaadi Před 10 dny +1

    Very helpful, Thanks a lot

  • @cedricsabellico5700
    @cedricsabellico5700 Před rokem +2

    I rarely comment on any videos, but this one seriously helped me out ! Have been searching for hours to make this in Elementor free version and without the use of plugins.
    Thanks a lot for your video, I really hope you'll get more views and subscribers, cause these are great and you really spread positivity !
    Have an amazing day ! 😁

    • @andreaegli
      @andreaegli  Před rokem

      I'm so happy to hear that, Cedric! comments like these keep me going let me know if there's anything you're interested in seeing on the channel. Have the best of days!

  • @PritamGosswami-c5l
    @PritamGosswami-c5l Před 15 dny +1

    Best video ever

  • @sunnyverma2528
    @sunnyverma2528 Před rokem +3

    thats what i was looking for, thanks a lot, appreciate it.

  • @Treekco24
    @Treekco24 Před 28 dny

    Thank you, you're amazing!

  • @zaidsharif2
    @zaidsharif2 Před 17 dny +1

    Thank Andrea

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

    Thank you. Amazing work you have!

  • @tanmoykumarbiswas2944
    @tanmoykumarbiswas2944 Před 4 měsíci +1

    It's Cool! I will use it on my portfolio site😍😍

  • @ProductiveDude
    @ProductiveDude Před rokem +2

    Love your content! keep going! :)

  • @ruubski
    @ruubski Před rokem +3

    Thanks for the video babe

  • @artechio
    @artechio Před rokem +1

    I needed it exactly today and it helped me a lot, thank you❤

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

    That's one wonderful tutorial! Super duper helpful. How do I make the edges fade though.. I've been trying soooo many different code snippets and can't get anything to work. Do you have any idea? I'm using this function to display companies I've worked with, but the abrupt cut off where the container ends doesn't look too good.

  • @clementyo4526
    @clementyo4526 Před rokem +1

    Hi, Egli ^^ I like how you present the tutorial ^^ Very cool and keep it up 👍😁

    • @andreaegli
      @andreaegli  Před rokem

      Thank you, Clement! 😊 I will and thanks for watching!

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

    You are my favorite youtuber

  • @sayit_suzie
    @sayit_suzie Před 20 dny

    will implement this ... but i did not find the shadow effect like in your actual slide (under every picture there was a shadow effect plus a colorful border too) ... would you mind doing a video on that?

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

    It is possible add a link for each image? Like, use this as moving crazy gallery for projects

  • @koerperkultgesundleben
    @koerperkultgesundleben Před 3 měsíci +1

    works well. thank u very much

  • @UnitEstudioWeb
    @UnitEstudioWeb Před 3 měsíci

    It works great and it's really easy!

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

    Thankyou Very Much

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

    Great stuff Andrea. Please is there a way to make it vertical instead of horizontal

  • @domingospc
    @domingospc Před rokem +2

    Hey, thanks for the video. There's a typo in the code in notion. After "linear" and before "!important" there's ":" ruining the snippet.

    • @andreaegli
      @andreaegli  Před rokem

      Hey Domingos! You're right and it's funny that nobody has told me that yet😁

  • @MirzaFarhan-1
    @MirzaFarhan-1 Před 4 měsíci +1

    what code should we apply to remove the pausing in this carousel.I want to make this carousel infinite in a loop without any pause.

    • @andreaegli
      @andreaegli  Před 4 měsíci +1

      What widget did you use? if it's the image carousel, go to additional options and turn off the pause on hover button.

  • @videotutorialsss
    @videotutorialsss Před 8 měsíci +1

    You need more subscribers for sure..

  • @christianlecuyer6380
    @christianlecuyer6380 Před rokem +1

    Great video, keep up the good work!

  • @user-je8nu5er7c
    @user-je8nu5er7c Před měsícem +1

    Done

  • @dileepbatchala1590
    @dileepbatchala1590 Před měsícem +1

    On hover it is not stopping, how to stop it on hover

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

      Go to the loop carousel settings, Elementor has a native option for the stop on hover effect in there...

  • @guillaumehaas1496
    @guillaumehaas1496 Před 21 dnem

    Hey ! wonderful video and good vibes here ! just a problem, I can't use the Custom CSS section in Elementor Free... WHat can I do ?

    • @guillaumehaas1496
      @guillaumehaas1496 Před 21 dnem

      ohh I've checked the comments below and and found the solution ! it works perfectly now ! :D

  • @JonathanLagonegro-ch2mc
    @JonathanLagonegro-ch2mc Před 3 měsíci +1

    Hi! is there a way to add individual links to the images?

    • @andreaegli
      @andreaegli  Před 3 měsíci

      I don't remember what widget I used here but you can't with the image carousel. Try the media carousel or carousel or loop carousel..you have options ;) hope this helps!

  • @JonathanVarasRoco
    @JonathanVarasRoco Před 3 měsíci

    Hi , Andrea, Thanks for this great content, new suscriptor here May I ask... Is it possible to display different sizes and aspect ratio photos with this method ? I mean... It would be awesome if I can Fit or justify those images by it´s height (1:1, 9:16, 4:3), so in that way it would be standardized and keep the loop consistent.

  • @encrypted.design
    @encrypted.design Před 9 měsíci

    Your videos are awesome and truly helpful 💯. By the way, you have gotten me obsessed with Gsap.😁.
    Quick question: I want to create a carousel that slides in from the end right of the screen to left on scroll using the carousel widget in Elementor, which allows me to place any elements in each carousel slide. Please can you help with that?

  • @ahsanfareed7514
    @ahsanfareed7514 Před 3 měsíci +1

    Thank you,..

  • @emersandoval8525
    @emersandoval8525 Před 9 měsíci +1

    Hi Adrea im a big fan =) quick question for you, i did everything as you show it on the video, but i dont know how to insert the code because i have elementor free =( and i just can´t paste the code nowhere, is there an option on this case?

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

      Hey! Thank you so much for watching my videos! Ok, so go to WP Dashboard > Appearance > Customise > Additional CSS and drop your code in there. Hope this helps ;)

  • @kevin-parratt-artist
    @kevin-parratt-artist Před 6 měsíci +1

    For my needs, a clean gallery space, this is too busy looking, and with all those brigh colours, It's ugly..
    I will be showing real artwork.
    I need something very clean with space between the images. Is that possible?

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

      If you're going to be using the loop image carousel, of course it will work. You can make it look as ugly or as beautiful as you want, style it however you like, this was just an example.

  • @CC-kw5sb
    @CC-kw5sb Před 8 měsíci

    Can you make the carousel go from top to bottom / vertical?

  • @wkpmidia2634
    @wkpmidia2634 Před 9 měsíci +1

    When the carousel images end, the loop doesn't work well, 2 images go by without loading and then they appear on the screen and the carousel continues again.

    • @andreaegli
      @andreaegli  Před 9 měsíci +1

      That's strange because it's working absolutely fine for me. Do you have activated the 'Upgrade Swiper Library' Elementor feature?

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

      From what I understand, this bug only happens if the session is not full width.@@andreaegli

  • @almakarim7110
    @almakarim7110 Před rokem +1

    hey, thanks for reading this comment. have you ever encountered a bug for slide show media carousel elementor pro, when we use dyncamic image with acf?

    • @andreaegli
      @andreaegli  Před rokem

      Hey, Alma! I've actually never used acf. What kind of bug have you encountered?

  • @markmahla2964
    @markmahla2964 Před 11 měsíci +1

    Everything looks great until I view page. Nothing, blank area. Any thoughts? Using Webp images.

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

      Can you see the images if you remove the code?

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

      @@andreaegli I think I figured it after I had done a work around because it worked on a smaller version on another page. This was for a landing page and images were large like your tutorial - I turned off lazy load and Viola there it was! Thanks.

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

    Do you have a video about creating a Slider Banner for my hero section in homepage? I've tried Testimonial Carousel but it has bugs, I've tried OoohBoi Steroids, also bugged when trying to work from backend Elementor.. Do you have a simple more intuitive option for creating a Banner Slider?

  • @bosphorustebosphoruste
    @bosphorustebosphoruste Před rokem +1

    thanks for this but i cant see the difference between before adding the code and after. the carousel is still not moving continuously and smooth. it keeps jitters on your video. is there a way to control the smoothness of the carousel by NOT having it stop but continuously running?

    • @andreaegli
      @andreaegli  Před rokem

      Ok, from what you're saying, i think you probably forgot to edit the settings of the carousel 🤔 My carousel jitters because of the cuts I made in the video but I guarantee you that it's really smooth. You can see it in action on my website as well, on the home page. Let me know if you need further assistance😉

    • @bosphorustebosphoruste
      @bosphorustebosphoruste Před rokem

      @@andreaegli you re amazing! it worked when i added the recommended code to CSS!!! thanks a million! definitely the best youtube tutorial!!

    • @andreaegli
      @andreaegli  Před rokem

      @@bosphorustebosphoruste yes!!! awesome!

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

    très bien bravo

  • @user-of3dc9xz1b
    @user-of3dc9xz1b Před 10 měsíci +1

    THANKS!!!!

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

    Thank you :)

  • @mgilbrtsn
    @mgilbrtsn Před rokem +2

    I copied the code and added it, but it doesn't seem to be working. It still stops. It says error on line 2 and 3 expected rbrace at line 2, column 44 and line 3 34. Can you please help?

    • @andreaegli
      @andreaegli  Před rokem

      sure, can you send me a screenshot here hello@egliandreastudios.com and I will get back to you tomorrow? Sometimes with code, it can be just a silly little thing like a coma or a brace....

    • @mgilbrtsn
      @mgilbrtsn Před rokem +1

      @@andreaegli I sent it

    • @mgilbrtsn
      @mgilbrtsn Před rokem +1

      @@andreaegli bis morgen, danke

    • @andreaegli
      @andreaegli  Před rokem +1

      @@mgilbrtsn ok, I had a look, compared it with my code and it is exactly the same to a t. You copied it and not typed it, right? One thing I would suggest is to delete it and type it word by word..makes no sense but worth a try. Another thing, is your Elementor up to date?

    • @mgilbrtsn
      @mgilbrtsn Před rokem +1

      @@andreaegli I've done everything I can think of and it still doesn't work. Just wasn't meant to be. Thank you very much for looking.

  • @jonhanlan
    @jonhanlan Před rokem +1

    Can you do this with video by chance? I can't get it to seem to work.

    • @andreaegli
      @andreaegli  Před rokem

      I would use the loop carousel widget instead. i tested it and it works but the UX is not the best tbh. I wish there was an option to open/play the video in a modal. i guess this could be a video idea for me but yeah...let me know if how it works for you if you decide to go this route.

    • @jonhanlan
      @jonhanlan Před rokem

      @@andreaegli I am using it with no controls, autoplay and on loop. In place of GIFs, as MP4s I find on the web are typically smaller file sizes. I haven't been able to get it to work, but I hope I can find a way - will let you know.

  • @brendahakoth
    @brendahakoth Před rokem +1

    This works great on desktop! But on mobile it's horrible. It keeps pausing. I tried using @media rules but still. Who knows how to fix this?

    • @andreaegli
      @andreaegli  Před rokem

      Hey, Brendah! Are you using this with the container feature?

    • @andreaegli
      @andreaegli  Před rokem +1

      I've checked a few websites (built with sections & flexbox) using this code and it seems that they're having the same issue. This used to work just fine and I suspect thatt the latest Swiper js library update is causing this. I raised an issue on Github. Once I have a reply, I will post an update here.

    • @brendahakoth
      @brendahakoth Před rokem +1

      @@andreaegli alright. Thank you so much, Andrea. I appreciate the feedback. 😊 But I'll try using the container method and see if it will fix the issue.

    • @andreaegli
      @andreaegli  Před rokem

      @@brendahakoth No worries Oh yeah, by flexbox I meant container and I tried it, same problem

  • @sandrarg2661
    @sandrarg2661 Před rokem +1

    One question, so that all the images appear in a loop on the mobile? I put the code but on the mobile when my images run out everything looks empty until a while passes and they reload 🤣

    • @andreaegli
      @andreaegli  Před rokem

      Yup, they should run in a loop on mobile too. That’s a very strange behavior tbh 😅 can you send me some screenshots of your carousel settings? By email…😉 does it work ok on desktop and tablet?

  • @JohnMunez-d2x
    @JohnMunez-d2x Před 28 dny

    I love u

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

    can we do it for carousal too?

  • @jamespandian3166
    @jamespandian3166 Před 5 měsíci +1

    are those images clickable?

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

      Can be made clickable. That’s a feature of the carousel widget

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

    I couldn't select 3 images at a time

  • @ulemansyari5343
    @ulemansyari5343 Před rokem +1

    Why not work on my web sister?

    • @andreaegli
      @andreaegli  Před rokem +1

      Hey! That’s strange because as you can see in the video it is working and I’m actually using it on my own website. Are you using it with the flexbox container feature? If so, I haven’t tested it yet on that…in any case, if you’d like, send me an email with the error message you’re getting..

    • @princec.1001
      @princec.1001 Před rokem +2

      @@andreaegli Just use this css if you are using flexbox container - selector .swiper-wrapper {
      transition-timing-function: linear;
      }

  • @jonathanashby4719
    @jonathanashby4719 Před rokem +1

    How do I get this on Elementor free? Your title says FREE & PRO options. Adding CSS isn't available in Elementor free.

    • @andreaegli
      @andreaegli  Před rokem +1

      Hey Jonathan! If you look in the top right corner of the video, there's an 'i' icon, click on it and you will see another video showing you how to add CSS in elementor free. Apart from that option, there are two more: you can install a plugin called code snippets and add your code in there or add an html widget to the page you have your carousel and drop your CSS code in there. Make sure to wrap it in: CSS goes here Hope this helps!

    • @jonathanashby4719
      @jonathanashby4719 Před rokem +1

      @andreaegli ahhh cheers. Always annoyed me that css was disabled in free version. This is a game changer. Many thanks!

    • @andreaegli
      @andreaegli  Před rokem +1

      @@jonathanashby4719 🤓 no worries! 🍻

    • @jonathanashby4719
      @jonathanashby4719 Před rokem

      @@andreaegli Hmmmmm... none of those seemed to work. The code snippets plugin, the HTML widget nor the adding additional CSS in custom made any difference. Not sure what I'm doing wrong.

    • @andreaegli
      @andreaegli  Před rokem

      @@jonathanashby4719 this is very strange...are you using the image carousel widget?

  • @rafaeln.castrom.6453
    @rafaeln.castrom.6453 Před rokem +1

    more tricks like this, plz (a rookie like me.. sniff-sniff)
    sub

    • @andreaegli
      @andreaegli  Před rokem

      hehe, more tricks like this are on the way. let me know if there's anything you want me to cover and thank you for the sub🤓