SwiperJS (not scrolling & width problem)

Design help Custom code
1

Hi everyone!

I’m having trouble getting things straight with swiperJS… I would like to have a horizontal “freemode” CMS slider aligned to the right. I want the slides to have a small gap and want to be able to see the next slide to be scrolled (even if it’s partial - like the image under)

https://inclusive-components.design/content/images/2017/11/scroll_for_more.svg

but I can’t seem to make it work:

  1. I can’t drag it
  2. The width is messed up (instead of the correct space between, the slides have a ridiculous amount of margin between them).

P.S. I got my swiper information from here

and from here

Here is my site Read-Only

Any help would be very appreciated :slight_smile: Have a nice one everyone!

2

This is the demo you need:

Anyway, your code without CSS/JS of swiper (Follow again the steps).

Add custom CSS (No way to control the width by webflow designer because swiper CSS loads after webflow CSS ==> Override width property).

js:
slidesPerView: "auto",
And custom CSS:

<style>
.swiper-slide{
   width: 80%; /* or any other value*/
}
</style>
3

Thank you so much @Siton_Systems ! It looks like I was using the wrong slider after all… I managed to fix all the website’s sliders :slight_smile: The 80% width on the slider also helped fixing everything (like, A LOT!)