Card Shuffle Slider in Webflow
HTML-код
- Опубликовано: 29 июн 2022
- Get the cloneable at webflow.grsm.io/shuffle-slider
View the swiper docs at swiperjs.com/swiper-api
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096 
Хобби
There is no match for Timothy.
One and only.
Big love for allowing me to improve my website with this amazing effect!
Tim you are wonderful to watch, a true artist of the web.
wow it's amazing Tim!
I've always wondered how to link up sliders like that. Amazing thankyou!!!!
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!
Oh, awesome!! I’m so glad this helps!
This is mind blowing, Thanks you
Nice work!
I'm wait for it so long ))
Amazing, thank's for this! Great!!!
Very nice tutorial
Amazing Timothy Ricks
This is awesome
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 👍🏾
Tim is the wiz
How do we set it to auto slide with a set interval? Thanks Tim!
thank
Hey Timothy, It doenst work whenever you duplicate the section. Is there a workaround to have more than on the page?
amazin tutorial as always! is there a way to enable slide change on click?
Wonderful Tim! One question, how do you connect SandBox with Webflow? Thank you!
Hi Eric, I show the full process in this tutorial.
ruclips.net/video/BkoSPoXbpb4/видео.html
I also have a tutorial specifically about CodeSandbox on Patreon at www.patreon.com/posts/51678553
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!!
same question here
Very cool as always Timothy! One question, does this work without the CMS?
Thank you! Yes, it does. You can use divs in place of the wrapper, list, and item.
@@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?
how do i get the skills collection list ? absolute noob here
I am noob, wžbut can I do this without CMS?
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?
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?
hey just add
autoplay: {
delay: 1200,
disableOnInteraction: false,
}
before the arrows code
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
Can this interaction work without the sandbox
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.
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 :)
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"
},
});
});
Hey @@Anup-webflow-design I appreciate this :)
Hi Tim! is it possible to do this automatically?
I mean to switch cards automatically. Thanks!