VERTICAL LOOPING CAROUSEL in Elementor - Flexbox Container Edition

No video

VERTICAL LOOPING CAROUSEL in Elementor - Flexbox Container Edition

Рет қаралды 27,074

andrea egli

Күн бұрын

Пікірлер: 96

@andreaegli Жыл бұрын

Still a bit experimental but I hope you found this useful. Let me how you'll be using it and if you need help with the code, give me a shoutout

@franktielemans6624 Жыл бұрын

Templatemonster has a tutorial about this aswel. It's 3 years old and I never tried it but it looks like it has no glitches. Images fade in and out. I also think this kind of design only works well on desktop and maybe on tablet, but not on mobile. kzfaq.info/get/bejne/g6iHg5STt6q9fmg.html&

@ob5804 Жыл бұрын

Andrea, hi. Help me , please. I can't understand why in vertical looping carousel, when each line with pictures, when it reaches the last picture, it makes some jump and the most important thing is whether it is possible to get rid of it and how?

@JasperFrumau 10 ай бұрын

@franktielemans6624 and css used seems to be selector{ -webkit-animation: middle-slot 100s linear infinite; -moz-animation: middle-slot 100s linear infinite; -o-animation: middle-slot 100s linear infinite; animation: middle-slot 100s linear infinite; } @keyframes middle-slot{ 0%{ transform: translate(0,0); opacity:0; } 5%{ opacity:1; } 95%{ opacity:1; } 100%{ transform: translate(0,-1000px); opacity:0; } } Just wonder in what way this is better. Duration is 100 seconds so longer, animation direction is default, but there is opacity for beginning and end set. Perhaps with that you can hide the glitching on restarts?

@viktorvarbanov1079 6 ай бұрын

@@JasperFrumau Tried this code out and it seems the carousel overflows the element. Can you share Templatemonster's video title, please?

@JasperFrumau 6 ай бұрын

Sorry, @@viktorvarbanov1079 , do not recall what video it was. Been 4 months now.

@enriqueparadasanabria261 4 ай бұрын

I dont use elementor, i use Bricks but have to say that the way you make your videos is so amazing and understandable that I have been able to replicate them easily on any builder. Congrats girl! You are truly talented. Sending you lots of blessings from Colombia

@AtapuercasMan 28 күн бұрын

Hola, Extraordinary explanation, the effect works perfectly on mobile devices. Thank you, Andrea, for contributing so much to those of us who are learning, like me. Many thanks and greetings from Valencia, Spain.

@JMT1227 Ай бұрын

Thank you!!! I've been trying to find a code that actually worked for hours. I modified it to fit my needs and it works exactly as I hoped.

@JohnXionidis Жыл бұрын

Loving this effect! Waiting for the small spikes bug to be fixed and i'll definitely implement this on my website.

@andreaegli Жыл бұрын

I love it too!! I’m testing it atm with the image carousel widget, turned 90deg. It works to some extent but not fully the way I want it. Will keep at it and post an update here hopefully soon 🤟

@jonathansilvasoares277 Жыл бұрын

Very nice, Andrea. Thanks for sharing that!

@andreaegli Жыл бұрын

Thank you, Jonathan! You are very welcome

@jeeiee_com Жыл бұрын

was expecting without any code, bit disappointed! by the way good video!

@andreaegli Жыл бұрын

I know, the thing is that with elementor you either use a plugin to get things doing what you want or you have to use custom code…☹️

@holliswebb1800 Жыл бұрын

fun use of space love it

@andreaegli Жыл бұрын

😁 thank you!

@heygaurav 5 ай бұрын

Awesome, Andrea! Life saviour ❤

@Art-01 Жыл бұрын

U are the best, thank u for sharing this with us.

@andreaegli Жыл бұрын

You're welcome, Art! It is still a bit buggy but I'm working on a new version...

@morsedkhan7590 Ай бұрын

Thank you!

@user-je8nu5er7c Ай бұрын

this is very useful

@rifkyganss3697 7 ай бұрын

Thank you for all the content you create, everything is very useful and coll

@mahdiandalib186 Жыл бұрын

you are the best by far

@andreaegli Жыл бұрын

Thank you so much 😊

@peteg6008 Ай бұрын

Outstanding job Andrea, just what I was looking for. It's perfect! Do I have your permission to add this in our website? One more: we cater to artists who have images in their profiles, one of which they can display in the slider. Is it possible to add a link to an image in the slider to access the portfolio of that particular image owner? Thank you so much! Let me know whether you would like exposure on our website (free of course)

@nigelchinyakata1801 Жыл бұрын

Your Content is amazing i didnt know how to do this with Wordpress.

@andreaegli Жыл бұрын

Thank you so much 😊

@himanshurastogi4543 Жыл бұрын

Really Helpful 😊

@andreaegli Жыл бұрын

I'm so happy to hear that, Himanshu 😃

@natedenf 4 ай бұрын

Thank you so much Andrea! I love this! Did you find a solution to the glitchy situation?

@Kidslearning618 Жыл бұрын

Very helpful video.

@andreaegli Жыл бұрын

Very happy to hear that 😃

@ajaykannaujiya1247 15 күн бұрын

The animations flickers when the slides ends and shows a jerky animation that doesn't look cool is there anything we can add to make it smooth and seamless

@loudesigns1682 2 ай бұрын

amazing tutorial! BUt i wanted to ask where did you buy that chair? hehe

@andreaegli 2 ай бұрын

Thank you 😊 ikea but I’m getting rid of it, not good for my back. This is the name of it if you wanna get it tho: JÄRVFJÄLLET

@loudesigns1682 2 ай бұрын

@@andreaegli Thanks sooo much Andrea! Appreciate you 🙏🏻

@WorkWithJuan 20 күн бұрын

Any update on this video? Regarding the code, I followed the steps and entered it in the CSS field, but it’s not working. Do you have any suggestions? It's not moving.

@tridentmarketinganglia 9 ай бұрын

Hey Andrea, This is great and exactly what I'm looking for however I've got 6 images which are 800x800px and I only get to see 2 images before the animation restarts. How can I make it so I can see all 4800px height before it resets? Thanks in advance DJ

@kamessytta Жыл бұрын

Cool! ☺️❤️👌👍🏻👏👏👏

@andreaegli Жыл бұрын

Thanks! 😄🤓

@CHIKOTimur Жыл бұрын

Hi Andrea, danke für dein super Video! Sag mal gibts auch die Möglichkeit den Container zu begrenzen? Ich möchte viele Bilder aneinander reihen aber die Bildgröße im Original lassen. Sobald ich das tue wird der Container leider nur immer länger und länger. Würde den Loop gerne auf die 100 VH begrenzen falls das geht. Freue mich auf deine Antwort! :)

@andreaegli Жыл бұрын

Hey! Unfortunately no. You would need some additional code or use the carousel widget but vertically. I'm trying to find a solution to use one of these widgets as it would make the looping smoother but I'm still working on it....

@galkorablikov8244 9 ай бұрын

Thanks a lot for this helpful video! I was wondering if you can share a CSS that will work fine with more than 3 images in a line. so it will continue without the glitch.

@youpium 11 ай бұрын

hi andrea , thanks for the tutorial , question if we want use 10 image or more for example , is possible avoid see the all image together in the container, that make me crazy, thnkz!

@user-os7dz7lj2g 9 ай бұрын

hi there once again amazing video! some how my images dont keep the size i set for them like by you in the video...i put them on medium 300x300 but they are tiny now how can i change that ? would appriciate if you could advice me what i did wrong ! thanks in advance

@azombi52 5 ай бұрын

hey awesome tutorial, did you find the solution for the glitch

@fabrictexture4767 Жыл бұрын

Stay Blessed

@andreaegli Жыл бұрын

😇

@CosplayerReelsDepot 5 ай бұрын

What if I have aroung 9 image per column and I want to displayed an initial 3 image then the carousel still goes on , how can I do that ?

@azombi52 6 ай бұрын

Awesome tutorial, can it work on a loop carousel

@andreaegli 6 ай бұрын

thank you! haven't tried it yet but I don't see why not

@DanielMejia-nu6ld Жыл бұрын

why can´t i see those directonal rows as options when i try to add a container? i tried with a regular one but i can´t edit Min height for example, that feaure is missing same the LAYOUT category so i can add a container....

@andreaegli Жыл бұрын

That is very strange, what is your version of Elementor?

@DanielMejia-nu6ld Жыл бұрын

@@andreaegli i update it and suddenly i was able to see the features, thank you so much!

@andreaegli Жыл бұрын

@@DanielMejia-nu6ld awesome! Elementor does that sometimes especially with so many updates lately, when in doubt, always update

@michelleramirez1122 Ай бұрын

I LOVE U

@bronxp84 Жыл бұрын

How to resolve the break? Infinite like rotation and not restart from same point is possibile?

@4041Jasmin Жыл бұрын

Hi, is there any solution for this? Any help will be appreciated! Thank You!

@andreaegli Жыл бұрын

Working on a solution, I will post an update soon!

@4041Jasmin Жыл бұрын

@@andreaegli Thank you for the help!

@andreaegli Жыл бұрын

@@4041Jasmin no worries!

@umaagrawal1417 4 ай бұрын

Mam if we don't use image and use texts it would work or not

@andreaegli 4 ай бұрын

Don't call me mam, it makes me feel old :))) I don't know, have not tried it. give it a go and let us know

@riyaan1993 Жыл бұрын

hello there, how did u do that width px vw at the same time i can chose only px or vw

@andreaegli Жыл бұрын

Can you tell me the timestamp where I did that?

@florianrackwitz 5 ай бұрын

The mobile preview looks perfect…but on real mobile it’s all in one column in the middle. I checked the video so often, but I still don’t know where the issue should be.

@andreiof5 Жыл бұрын

Wonderful girl! Pretty and intelligent 🧠🤓

@andreaegli Жыл бұрын

🤓 thanks!

@bobruis4073 Жыл бұрын

Great tutorial Do you have a solutions for the bug?

@andreaegli Жыл бұрын

Thank you, Bob ☺️ not at this time, no…

@bobruis4073 Жыл бұрын

@@andreaegli I found a channel that did the same tutorial as yours. As I followed it I noticed he is using more CSS. And makes use of Javascript (jQuery)

@andreaegli Жыл бұрын

@@bobruis4073 do you mind sharing the channel with us?

@bobruis4073 Жыл бұрын

@@andreaegli here you go: Create an Auto Sliding/Scrolling Image Effect in Elementor | Infinite Scrolling Image Slider

@andreaegli Жыл бұрын

@@bobruis4073 ah, yes, I've seen this one . Have you implemented it?

@cristianborrero Жыл бұрын

♥Saludos!

@andreaegli Жыл бұрын

Saludos! 👋😃

@user-os7dz7lj2g 10 ай бұрын

hi any updates on the glitch ? thx in advance!

@barmosseri1353 6 ай бұрын

The images geting out of my screen, could you help me fix it?

@andreaegli 6 ай бұрын

hey! send me a screenshot or a link to your website

@barmosseri1353 6 ай бұрын

Thanks, I solved the issue@@andreaegli

@barmosseri1353 6 ай бұрын

Hey, me again. When I have smaller image dimensions it's open empty spaces and overleap@@andreaegli

@CosplayerReelsDepot 5 ай бұрын

No animation at all in my end after using the code . :(

@Ammar_J 7 ай бұрын

if the glitch is fixed please update the code. please😔

@MIMMarketing 7 ай бұрын

Very nice but I think it will not look good on mobile. But otherwise very nice. Thx

@SouViniciOs Жыл бұрын

It helps me when I put the class in the image nothing happens

@andreaegli Жыл бұрын

Hey Vinicio! Not sure I understand, is it working or not when you add the class on images?

@avneeshgadgil658 3 ай бұрын

I think he means it doesn't work, that's happening in my case. Any help or tips would be appreciated, thanks!

@avneeshgadgil658 3 ай бұрын

Okay I just figured it out. The heading that says "1st vertical carousel" needs to be either deleted or commented out. Hope this helps!

@BMWSY-RUST1 5 ай бұрын

marry me?😁

@ashwinsalunke9929 6 ай бұрын

your videos are really awesome and 100% unique loved it.. the magic you do with the elementor is truly great.!!