Elementor smooth infinite loop image carousel - FREE & PRO options
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- In this video tutorial, I will show you how to create a smooth infinite loop image carousel with Elementor Pro & Free. It's so smooooothhh :)
CODE: irradiated-watch-2d6.notion.s...
Timestamps:
00:00 Intro
00:36 Start by adding a section
04:06 Insert custom CSS code
04:22 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
(this video is about: egli andrea, HOW TO make a smooth infinite loop image carousel / Elementor FREE & PRO options, wordpress and elementor, how to code in elementor for free, image carousel, smooth infinite loop image carousel with elementor, elementor tutoria, looping, marquee)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
![รอจะบอกคำนั้น - KARN The Parkinson x DAOU PITTAYA [LIVE SESSION]](http://i.ytimg.com/vi/wACfLFATe2Y/mqdefault.jpg)
GREAT, just implemented it and I love the outcome!
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
You are very welcome 🤓 yeah, I hate the swings and roundabouts so I try to minimize them as much as possible :)))
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 ! 😁
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!
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.
thank you, Mark!
I needed it exactly today and it helped me a lot, thank you❤
So happy to hear that!!!!🤩
thats what i was looking for, thanks a lot, appreciate it.
Glad I could help, Sunny!
Thank you. Amazing work you have!
It works great and it's really easy!
Hi, Egli ^^ I like how you present the tutorial ^^ Very cool and keep it up 👍😁
Thank you, Clement! 😊 I will and thanks for watching!
Love your content! keep going! :)
Thank you! Will do!
Thank you! Exactly what I needed
You’re welcome 🤘🏻🥳
Great video, keep up the good work!
Thanks, Christian! Will do 🤓
It's Cool! I will use it on my portfolio site😍😍
Thank you 🙏 nice 😊
You are my favorite youtuber
Thanks for the video babe
Welcome 🙏
Thank you :)
works well. thank u very much
You are very welcome 🙏
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?
très bien bravo
Great stuff Andrea. Please is there a way to make it vertical instead of horizontal
Thankyou Very Much
You are welcome
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.
Thank you,..
Can you make the carousel go from top to bottom / vertical?
THANKS!!!!
You're welcome!
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.
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?
can we do it for carousal too?
It is possible add a link for each image? Like, use this as moving crazy gallery for projects
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?
Hey, Alma! I've actually never used acf. What kind of bug have you encountered?
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.
What widget did you use? if it's the image carousel, go to additional options and turn off the pause on hover button.
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?
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 ;)
Hey, thanks for the video. There's a typo in the code in notion. After "linear" and before "!important" there's ":" ruining the snippet.
Hey Domingos! You're right and it's funny that nobody has told me that yet😁
You need more subscribers for sure..
I know, right? 🤓
Hi! is there a way to add individual links to the images?
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!
On hover it is not stopping, how to stop it on hover
Go to the loop carousel settings, Elementor has a native option for the stop on hover effect in there...
Done
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?
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😉
@@andreaegli you re amazing! it worked when i added the recommended code to CSS!!! thanks a million! definitely the best youtube tutorial!!
@@bosphorustebosphoruste yes!!! awesome!
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 🤣
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?
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?
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.
Can you do this with video by chance? I can't get it to seem to work.
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.
@@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.
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?
Hey, Brendah! Are you using this with the container feature?
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.
@@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.
@@brendahakoth No worries Oh yeah, by flexbox I meant container and I tried it, same problem
Everything looks great until I view page. Nothing, blank area. Any thoughts? Using Webp images.
Can you see the images if you remove the code?
@@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.
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.
That's strange because it's working absolutely fine for me. Do you have activated the 'Upgrade Swiper Library' Elementor feature?
From what I understand, this bug only happens if the session is not full width.@@andreaegli
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?
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....
@@andreaegli I sent it
@@andreaegli bis morgen, danke
@@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?
@@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.
I couldn't select 3 images at a time
are those images clickable?
Can be made clickable. That’s a feature of the carousel widget
Why not work on my web sister?
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..
@@andreaegli Just use this css if you are using flexbox container - selector .swiper-wrapper {
transition-timing-function: linear;
}
How do I get this on Elementor free? Your title says FREE & PRO options. Adding CSS isn't available in Elementor free.
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!
@andreaegli ahhh cheers. Always annoyed me that css was disabled in free version. This is a game changer. Many thanks!
@@jonathanashby4719 🤓 no worries! 🍻
@@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.
@@jonathanashby4719 this is very strange...are you using the image carousel widget?
more tricks like this, plz (a rookie like me.. sniff-sniff)
sub
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🤓