Streaming live at 10am (PST)

How can I create a simple drag slider with CMS and Flickity?

Hi guys,

I want to add a simple drag and drop slider for the team section on this website: https://stastny-optik.webflow.io/

Here is the preview: https://preview.webflow.com/preview/stastny-optik?utm_medium=preview_link&utm_source=designer&utm_content=stastny-optik&preview=188098c01ab3babc44fb4a6b83da2d69&mode=preview

For this purpose the built-in slider and the built-in cms pagination feature won’t do the job…well, not the way I want it to.

So I searched a bit and found a cool plugin called Flickity.

However after trying to implement and install it on the website with no success I wanted to know if you could help me implement the flickity code?

Thanks in advance!

Best regards,
Sebastian

Hi there.

I was in your position just a few days ago and wanted to have a slider that can be dragged left to right and vice versa, with CMS items inside. I did a lot of research and came to a conclusion that swiper.js is the ideal solution for this. You simply have to integrate swiper.js on your site and select from this list of demos which slider suits your needs best: https://swiperjs.com/demos/

I think the slider that might suit you best is the free movement one: https://swiperjs.com/demos/150-freemode.html

To implement it, paste the following code inside your page settings before ending the </body> tag:

<script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      freeMode: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>

Now place a collection list inside your page. You’ll see there’s 3 overall containers:
collection-list-wrapper > collection-list > collection-item

The collection-list-wrapper is the main parent, while the collection-item is an individual slide.

Rename the above to
swiper-container > swiper-wrapper > swiper-slide in the same order.

Publish the site and the collection list should behave as a perfect draggable slider.

And the good news; it works perfectly on phones, you can slide it with your finger. Let me know if you have any doubts, would be happy to help!

Cheers,
Aditya

PS: Don’t forget to initialize swiper.js by pasting this code above the script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

1 Like

Thanks a lot! This worked wonders.

1 Like