Hello everyone, I hope you are doing well.
I am looking to add a custom code on my portfolio website but from the resouces that I find on the web, there are only examples of draggable carousels that swipe only with a set of number of slides you set on the code, rather than free roam swipe where the cards are sliding with based on the power of the mouse drag effect like in the example of this website. Conversion through immersion. Web · AR · VR | Poppr
Does anyone have any solutions to this?
This can be done with css scroll snapping, but if you want an infinite scrolling effect you would need to write some javascript to loop it and give it that infinite scrolling effect.
Splide is a really good library for this, you get lots of options with the slider including allowing you to drag and skip multiple slides, or add in an infinite scrolling effect. It isn’t all too complicated, just takes a good read.
here’s a great tutorial by Web Bae as well, very minimal coding.
Thank you for your response! I will watch the tutorial and the library that you have provided and try to create it. I will come back with my approach if it works!
+1 for splidejs, I used it in this cloneable and very impressed.
Swiper JS also seems to have the capability you’re looking for, check out flow ninja’s cloneable here;
