Card Shuffle Slider in Webflow

[@rashidnawaz5634]

There is no match for Timothy. One and only.

[@nikolatripkovic5322]

Big love for allowing me to improve my website with this amazing effect!

[@danielapro9755]

I've been trying for so long to do this card effect, it never worked out for me! Thanks so much for doing this! This is super useful!

[@timothyricks]

Oh, awesome!! I’m so glad this helps!

[@isaacshtark63]

Tim you are wonderful to watch, a true artist of the web.

[@jehutia]

I've always wondered how to link up sliders like that. Amazing thankyou!!!!

[@tanmai5785]

wow it's amazing Tim!

[@rievalix1244]

Hey Tim! I just wanted to ask because you did a code sandbox and it immediately reflected on the webflow website? i wanted to ask how you did it since in this video you already had a tab opened so i wouldnt really know how to configure it myself 😅 hope you could reply to this it would mean a bunch!!

[@this_is_mattia]

same question here

[@HORDERARII]

I'm wait for it so long ))

[@ryankrause4686]

Nice work!

[@theReal_WKD]

Hey! Super tutorial, as always. I have implemented the same slider on my website and everything is working nice except for one thing: in the Webflow Designer, I can't get the images collection to show only one image. On my side, I have all the images aligned vertically. I manage to do the trick for the titles, so I have only one shown in the Designer but the images are tough on me. I have replicated the exact settings from the clonable, in terms of width/height and position relative/absolute but I can't get it to work as yours where in the Designer we only see one item of each collection. I even edited my images in Photoshop so I can do you trick to use them as the backgroud image of the "swiper-slider" (at first I had some divs in "swiper-slider" to give some styles but I have recreated these styles directly on the image via Photoshop). Some help would be very much appreciated 👍🏾

[@ericruizmolero]

Wonderful Tim! One question, how do you connect SandBox with Webflow? Thank you!

[@timothyricks]

Hi Eric, I show the full process in this tutorial. kzbin.info/www/bejne/eJzShIOljcejmJY I also have a tutorial specifically about CodeSandbox on Patreon at www.patreon.com/posts/51678553

[@nikolaarsovskiii]

This is mind blowing, Thanks you

[@Hassanakora]

Very nice tutorial

[@famplan8508]

How do we set it to auto slide with a set interval? Thanks Tim!

[@mxtheusfb]

Amazing, thank's for this! Great!!!

[@shahilson]

Thanks for this Tim! Big fan of your work! My client was wanting something like this but having it autoplay, I've tried a few codes to try and make it autoplay but I'm definitely doing something wrong as it's not working 😅 Do you have any clue on how to get this to autoplay?

[@ugamochi]

hey just add autoplay: { delay: 1200, disableOnInteraction: false, }

[@ugamochi]

before the arrows code

[@michaelagyemang9639]

Tim is the wiz

[@smarthustlersclub6375]

This is awesome

[@akaashemmanuel7062]

how do i get the skills collection list ? absolute noob here

[@brandocean6322]

Hey Timothy, It doenst work whenever you duplicate the section. Is there a workaround to have more than on the page?

[@samueljaramillo7144]

amazin tutorial as always! is there a way to enable slide change on click?

[@petarlhs]

I am noob, wžbut can I do this without CMS?

[@onlinecoachrobert]

Need some help with this one. I'm not able to make it work on mobile version - text seems to be hidden (transparent) for some reason. It's working as it should on desktop. Anyone?

[@nironathan2490]

Nice Video dude, can anyone help me. I try this video more than 10 times. when i copy the cdn link in embed code and js script it doesnt work. The effect dont show. best regards Niro

[@serychristianrenaud]

thank

[@hilarypeters3943]

Can this interaction work without the sandbox

[@timothyricks]

Yes, the cloneable in the video description doesn’t use CodeSandbox. That’s just used for testing while building, not for hosting code long term.

[@csubex]

Very cool as always Timothy! One question, does this work without the CMS?

[@timothyricks]

Thank you! Yes, it does. You can use divs in place of the wrapper, list, and item.

[@noahybarra-ug9cg]

@@timothyricks Hello Timothy, I tried doing the divs like you said but unfortunately i am stuck and the text seems to be invisible and the text wont take up the height of the images. any suggestions?

[@midnightradio958]

Not working bump

[@manco7551]

Hi Tim! is it possible to do this automatically?

[@manco7551]

I mean to switch cards automatically. Thanks!

[@midnightradio958]

Not working

[@sashakuridza3945]

Hey @timothyricks just to give you a little notice, this swiper library is changed to new one and all who use swiper@8 now doesn't work. Please check update :) Btw great tutorials brother, keep it up :)

[@Anup-webflow-design]

I imported the Latest version of Swiper cdn, ie. 10, in my Webflow, and used the same inner code; it's working fine. You can just use your swiper code inside the dom function like this . Here is the code I used, I hope it helps. $(document).ready(function(){ let photoSwiper = new Swiper(".swiper.is-card", { effect: "cards", rotate:0, speed: 1000, scale: 0, grabCursor: true, loop:true, keyboard:true, autoplay:{ delay: 3000, disableOnInteraction: false, }, navigation: { nextEl: $(".swiper-next")[0], prevEl: $(".swiper-prev")[0], disabledClass: "is-disabled" }, }); });

[@sashakuridza3945]

Hey @@Anup-webflow-design I appreciate this :)

[@vianosuze]

sorry, but your project not working anymore