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

Design help Custom code
1

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

2

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: Swiper 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>

5 Likes
3

Thanks a lot! This worked wonders.

1 Like
4

Would you know how to add arrows as well for making into a slider?

5

Yep. Just add two divs inside the .swiper-containernamed .swiper-button-next and .swiper-button-prev (or whatever you’d like to name them, just make sure the class name matches the name inside the JS that is in your </body> tag)

And of course, make sure to add this bit inside the new swiper var that you are creating:

navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

So now, your code would be looking like this:

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

You can then put arrow icons inside the two next and prev divs and style away.

1 Like
6

Hi @aditya1 ~ this is all good news, but I still cannot get this to function as it should. I simply want a gallery to show one image at a time, but the gallery wants to show ALLL the images at the same time, stacked.

I want a CMS Collection called ‘shoots’, and within each that collection, each post would have 20 images or so. I want each post to show the multi-image gallery one at a time. I’ve structured the setup like this, and it’s not happening. Any tips?

Screen Shot 2020-10-28 at 9.39.03 AM
Screen Shot 2020-10-28 at 9.39.03 AM828×764 217 KB

7

Hey @M_J_Beaulieu

A bit tricky that but here’s what I would try:

I’d place a normal collection list first and connect it to the right CMS table, and inside the “collection-item” I’d drop another collection list and link it to the multi-image field. Then I’d rename this collection list to the swiper classnames. Can you try this out if it makes sense?

8

It appears that I can’t put a collection inside a collection item :frowning: ~ So this is still not working for me to view a multi image collection one slide at a time.
Damnnnn, I need to make this work.

9

my setup is this, and the page still loads the entire image collection, not one image at a time.

Screen Shot 2020-11-19 at 6.17.46 PM
Screen Shot 2020-11-19 at 6.17.46 PM834×794 59.2 KB
THEN, actual page appears liek this, like the entire collection is ONE slide :
Screen Shot 2020-11-19 at 6.23.03 PM
Screen Shot 2020-11-19 at 6.23.03 PM2550×1428 120 KB

10

It’s amazing!
Thanks a lot @aditya1 :heart:

1 Like