Hello! I am not happy with the slider/caroussel from webflow (no smooth draging, no free scroll etc). So I tried to use swiper. For me it seemed the smoothest of all. I was able to add it but still struggle with the following: How do I add pagination? How do I add the arrows? And how to I change …

Hi Ezra, are we talking about my last problem? :slight_smile: I dont want to change settings for ech slider. But for each slider. Like in your example. But when I set one to loop, the other loops as well and so on… I think I got confused with the combo class names. Ah okay, my site right now looks…

I created full tutorial about this plugin - Please follow (Mark as solution her if you have been able to solve the problem). [image] How to integrate Swiper.js 6(Slider/Carousel - mobile touch) & Webflow CMS Webflow Tips Update august 2021 - Swiper 7.0 change…

Thank so much! I got some questions. When I want only 1 or 2 images shown on desktop (like you showed in the “cutting edge”-example, the height stays the same. Only the padding/margin grows. What do I need to change that the image itself grows like in my 2nd screenshot or in your example? 1st […

Please add live URL :slight_smile: (No way to test the result by read-only link). In general, for responsive images added for the image: width: 100% height: auto; Also, another way to debug is to add background-color: red for the slides and elements (Or black border).

I think I figured it out. The site of the image was too small. 500px. now its 1500px. But something strange is happening. When I change width of desktopwindow and then make it wider again, the images stays small. I see 3 instead of 1… and I added the width:100% / height: auto.

You should responsive images inside slider (No fixed size = overflow = a lot of bugs).

https://kdi.webflow.io/swiper-with-cms

Look fine :slight_smile: what is the problem?

I set the slidesPerView: from ‘auto’ back to 1.5 in the desktop breakpoint and then it worked!! But how do I set it up when I want your example of the "cutting edge! style. with the 60% width of the first, aligned to left. I couldnt figure it out. When I set slideperview to ‘auto’ I have the resiz…

I am not really sure swiper supports the idea of 1.5 (No docs/examples about this issue). If swiper supports this - this is very useful. It looks like it working.

It seems to work :slight_smile: Still have the problem with the resizing when I use auto… any idea? And one more question. While using auto, is it possible to have the first slider aligned left, and the rest is centered?

Need help with swiper js

Design help Custom code

Siton_Systems (Ezra Siton) March 1, 2020, 3:02pm 2

I created full tutorial about this plugin - Please follow (Mark as solution her if you have been able to solve the problem).

2 Likes

Topic		Replies	Views
How to integrate Swiper.js 6(Slider/Carousel - mobile touch) & Webflow CMS Webflow Tips	58	34992	October 27, 2021
CMS image slider: draggable, infinite, seamless, fullscreen Animations & Interactions	0	1313	April 9, 2021
SwiperJS (not scrolling & width problem) Custom code	2	9165	June 29, 2021
Swiper.js (pagination not working) Custom code	8	21636	June 7, 2020
Swiper.js - CMS Slider Headache! Custom code	6	3357	January 14, 2021

Need help with swiper js

Related topics