Need help with swiper js

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 breakpoints so for example on mobile it shows just 1 slide etc. I added the script code for breakpoints but then it didnt work at all…

Maybe someone can help.

Thank you!

https://preview.webflow.com/preview/kdi?utm_medium=preview_link&utm_source=designer&utm_content=kdi&preview=501e0f181208bdb2b6d746b4742b88cb&mode=preview

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

2 Likes

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

2nd

Attached is again my new read only link:

https://preview.webflow.com/preview/kdi?utm_medium=preview_link&utm_source=designer&utm_content=kdi&preview=501e0f181208bdb2b6d746b4742b88cb&pageId=5e5bd63d63723ecba3a8f0cf&mode=preview

Thank you!!
Klaus

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).

1 Like

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 resize problem…

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.

1 Like

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?

Hello Ezra, I have a problem with showing 2 or more different sliders on one page.

How do I have to change the class-name of the swiper-wrapper, swiper-slide and the navigation and pagination? When I set values for the 1st slider (loop, true etc) it sets it for the 2nd slider as well. Not sepperatly… I think its because of the names? Do I need to change the class to the combo names as well?
Also when I click the arrows in the first slider, the 2nd moves and so on… I can’t find the problem.
Maybe you have an idea.

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

https://preview.webflow.com/preview/kdi?utm_medium=preview_link&utm_source=designer&utm_content=kdi&preview=501e0f181208bdb2b6d746b4742b88cb&pageId=5e5bd63d63723ecba3a8f0cf&mode=preview

Maybe start with simple codepen.

In general no way to give diff setting for each slide (Loop is in slider scope not in slide scope). You talk about this example? (Create thumbnails)

In general “no way” (Or very hard) to create complex code on webflow (Create working codepen example and only than remove “the idea” to webflow).

(Each time you need to change - publish - refresh == hard to debug).

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 like your codepen example. No I want to have 2 seperate sliders.But somehow on my site they are connected. I dont know why. I dont want that.

Looks like you have reached a solution. I’ll point out that by doing “desktop resizing” you are just a developer revealing a side effect. I’ve looked at the lib. Not a big fan of it. It works for yesterday. If you are comfortable with jQuery you can easier deal with resizing by implementation a solution based on CSS Flexbox and Transitions because that deals with resizing before applying JS in responsive world. Essentially all carousels are a simple timing loop with data width and breadth which are the bounds for the loop. Any more issues?

Hello Ezra, may I ask you if it’s possible to have youtubebvideos (iframes) as sliders which are draggable. They start directly when dragging them. Just wonder if this is possible.

Regards,
Klaus

Yes. In general you can use “on swipe” event (And play the current this active slide video). Keep in mind chrome block videos with sound (So the play “by code” will not work her). For mute videos yes. I could solve this for you by this is dev misson (Hard to answer this on forum).

In the past i made this codepen:

Hi, I have question regarding default swiper slide screen, I have implemented swiper slide in the ionic framework , but I want to open the first slide always on the reload of the screen means in ionViewDidEnter I have called the swiper’s slideTo(0,0) by using a swiperRef , but it’s saying undefined object what should I need to do? I am using swiper 6.8.4

here is my code:-

export class InstructionsComponent implements OnInit,AfterContentChecked{
@ViewChild(‘contentSlider’) contentSlider: IonSlides;
@ViewChild(‘swiper’) swiper: SwiperComponent;
public swiperConfig:SwiperOptions={
pagination: true,
slidesPerView:1
};

ionViewDidEnter() {
this.slideChange;
this.store.dispatch(showTabbar({ showTabbar: false }));
//show first slide bydefault on redo scan
setTimeout(() => {
this.swiper.swiperRef.slideTo(0,0);
console.log(“under set timeout”)
},0);
}