Streaming live at 10am (PST)

Swiper.js (pagination not working)

Hello, I’m trying to implement swiper.js and I can’t make the pagination to work. I tried the progress bar pagination and the bullet style pagination, neither worked.

Link to preview the project:
https://preview.webflow.com/preview/swiper-js-7d8222?utm_medium=preview_link&utm_source=designer&utm_content=swiper-js-7d8222&preview=ddb40ec8692baadbedd0ad7258f5da96&mode=preview

Published version:
https://swiper-js-7d8222.webflow.io/

Can anyone help me to spot what I did wrong? Thanks for taking the time :pray:

Trying to accomplish the same thing. I just started looking into the pagination after finally getting swiper.js working properly with videos. If I figure it out I will post it here.

Here is my project preview if you are interested.
https://preview.webflow.com/preview/motionctrl2?utm_medium=preview_link&utm_source=designer&utm_content=motionctrl2&preview=9f3f2dcba05d430091220d2d88be3cb3&pageId=5ea5d24f5dd63e5ec8d33675&mode=preview

Published

1 Like

Appreciated Gavin! Hopefully, you can find the answer for both of us, thanks for sharing your project as well. I tried for 1 to 2 hours to fix the pagination, but sadly I did not pinpoint the problem, good luck mate. :pray:

I got it to work now lol, I forgot to add this inside the head tag:

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

Now I need to fix how it looks, because after I linked the css from the Swiper everything is a mess. :laughing:

1 Like

Brilliant! I still can’t get it to work on my end but thank you for sharing. Cheers!

Oh :frowning: The one I did is static which makes it easier to implement, for cms it is a bit different I hope someone can guide you to fix this.

Try to follow this guide (I believe you already is, but gonna link in case you are not): How to integrate Swiper.js (Slider/Carousel - mobile touch) & Webflow CMS.

1 Like

Yeah, looks like doing this with CMS is a bit more difficult to pull off. Thanks for the link!

1 Like

Update, got it work! Step three of that link you sent was vital (basically that adds it manually, no need to make a div with a class name or anything). Only thing that was tricky was positioning it where I wanted(google’s inspect mode helped with that). You can check it out if you are curious to see how it works with the CMS. Thanks again!

1 Like

Good job Gavin, I’m happy for you! Merits to the creator of that guide, thanks for sharing your solution as well, I will definitely check yours, cheers :pray:

1 Like