I love the Sonos drag carousel that they are using for showing off their products (www.sonos.com).
Is it possible to create something similar in Webflow, where you are able to freely drag the slider?
Bump - would love to know if anyone has any idea on how to achieve this (or something similar).
Yeah, it’s “easy”. But not anything Webflow can do. You will have to use something like Swiper.js (Swiper) for that. Takes some implementation of custom code.
Hope that helps. 
1 Like
Thank you! I think this is what I’m looking for. Will give it a try.
And change the curser to a “Dragging Hand”. Sonos is nice, but they used a “Pointer Finger” for the drag. 
I guess since it’s a link, it might not make sense.
Does anyone have any idea on how to align the slider to the left of the wrapper I am using? I want it to be aligned with my text like the image I’ve attached.
There’s a ‘centeredSlides’ script command in the code - so it’s either centered and goes to the left, or it’s full width of the viewport from the left to the right.
I used this Swiper demo:
Hey AndreasV
That is easy. It always aligns to left if ‘centeredSlides’ is not in the script.
Use this:
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
});
</script>
And make sure to give you div class=“swiper-slide” a width of either 60% or 60vw. Then it should look like that.
2 Likes
Hey ToreSBentsen
You’re right! It’s then aligning it like I want to. But when I then go through the slider with the grab effect, it won’t reach the end. I can only scroll through the first couple of slides, then it stops.
My wrapper is set to: max-width: 1200px; margin: 0 auto;
Any idea on how to solve this?
Hard to say. But you can send a published demo and a preview link, then i can sure take a look at it.
I’ve sent you a private message with both links. Thank you.
