▼
Streaming live at 10am (PST)

Swiper.js - CMS Slider Headache!

Design help Custom code
#1

Hello all,

I need some help with this one. Trying to create a horizontal scroll image carousel like Apple Music uses on the Browse page, and like Netflix uses for displaying movies and shows.

Currently using Swiper.js to achieve this. I’m following all of the instructions correctly (that I know of), but it seems Webflow won’t listen to certain parameters.

On my Resources page:

  • The .swiper-slide shows huge spacing when spaceBetween = 10. There should only be 10px between each slide.
  • The slidesPerView=5 is also being ignored.

Thanks

Read-only link

1 Like
#2

I got it working, it was related to breakpoints. I’ll be posting a “how-to” soon!

#3

Looking forward to it! I’ve been looking to do use swiper with CMS on a project I’m working on

1 Like
#4

Hey, any chance you have posted that “how-to” yet? Trying to implement Swiper on my site. Thanks!

#5

yes, Ive been busy with a large project. What are you having issues with?

#6

I ended up getting Swiper implemented. If you are pretty familiar with it I could probably still use help, but if not no worries. I have a free form slider that I have set to shrink a little on mousedown via css. My problem is it scales the swiper wrapper and container I think because of how the slider is programmed to be dynamically sized. Do you know if there is any way to shrink just the wrapper that holds the items? I would like for the container (the mask) to stay 100% wide but just the contents to shrink.

Here is an example, down the page a bit in the “fid your fit” section
Example

Here is my clonable project
Link

Thanks!

#7

Would love to see that how-to or a few quick tips on breakpoints if you have them!