Autoplay and Ken Burns effect for the Auto Layout Banner Slideshow (7.1) | Day 5 of 12DOC

[@beatrizstaubyn5018]

You are a life saver Beatriz, your tutorials have been very helpful :)

[@beatrizecaraballo]

Thanks so much! I appreciate it 🙌

[@gabigabrielle3115]

OMG I am not a coder AT ALL and this was so easy to follow ! You made my website look 100 times better THANK YOU !

[@beatrizecaraballo]

YEEES! I'm THRILLED to hear you were able to implement the customization on your own!! That's amazing!! 🙌 I'm happy I could help and I really appreciate your comment. Thank you so much!

[@Lemoneshade]

I am not a web designer, just someone trying to make a proper website somehow! Interesting content and well explained, would be amazing to cover how to do this to a photo gallery (carrousel) to enable a smooth and sweet transitions between images!

[@beatrizecaraballo]

Thank you! And that's an awesome suggestion. I'll look into it! 🙌

[@gidramom]

Thank you! It worked nicely. However, is it possible to apply the effect from the first slide? Currently it starts from the second slide...

[@beatrizecaraballo]

You're welcome! There's a snippet at the bottom of the post that you can use to make that happen on the live site: www.beatrizcaraballo.com/blog/auto-layout-banner-slideshow-autoplay-ken-burns Hope that helps!

[@andrew4066]

Thank you so much for this! Do you know if there's a way to slow down the transition speed? Not the time each slide takes on screen, but the 'sliding time' from one slide to the next

[@beatrizecaraballo]

You're most welcome! Even when there IS a way to slow down that sliding time, I wouldn't recommend it. Because of how the original sliding animation is built, there would be a really odd white gap showing in between slides after the code is added: .user-items-list-banner-slideshow .list-item { transition: transform 3s; } As you can see, because the slides come in from the same side, things look... weird. I believe the whole sliding setup would need to be rebuilt to get the effect working correctly. But in that case I would suggest building your own slider from scratch with a js plugin like splidejs instead. Hope this helps!

[@andrew4066]

@@beatrizecaraballo Oh, thank you! Got it! I was thinking of a better visual rather than just the slide, maybe a fade onto the next one, or a slower transition. I'll try out different alternatives, and if nothing works, I'll stick to it plus Ken Burns. Thanks once again! 🙂

[@beatrizecaraballo]

You're welcome! Also, if you're interested in a fade-in effect, someone else inquired about that via email so I'm currently looking into it! I'm still unsure if I'll be able to make it into a tutorial or need to turn it into a plugin, but feel free to shoot me an email at [e-mail] if you'd like me to notify what comes out!

[@LordKiser]

Hiii! This works very nice. Is there any way I can have the script target a specific section? Thankkks!!!

[@beatrizecaraballo]

I'm happy to hear that! ☺ And sure thing, you'll need to add your data-section-id before the selectors .user-items-list-banner-slideshow__arrow-button--right and .user-items-list-banner-slideshow inside their corresponding JS/CSS snippets in the code. That will look like this once you change them: body:not(.sqs-edit-mode-active) [YOUR-DATA-SECTION-ID-HERE] .user-items-list-banner-slideshow__arrow-button--right [YOUR-DATA-SECTION-ID-HERE] .user-items-list-banner-slideshow .list-item:not([aria-hidden="true"]) img [YOUR-DATA-SECTION-ID-HERE] .user-items-list-banner-slideshow .list-item img Hope that helps!

[@tanny_edits]

what temaple you use for this tutorial?

[@beatrizecaraballo]

I used 7.1! They're all the same template, even when the designs are different.