Streaming live at 10am (PST)

How to integrate Swiper.js 6(Slider/Carousel - mobile touch) & Webflow CMS

Would it be possible to get the images/backgrounds from the multi image fields?

I figured out it works with multi image fields as well!
Unfortunatly I cant add other cms field to the div. For example the subline/name. Would it be possible to get the „alt-tag of the image to use as as a field? Its the only thing related to the image. I am no coder, so I dont know if this is possible. :slight_smile:

Hello,
Quick question, which layer did you embed the custom code in collection list?

@elected ! Did you get it work?

I didn’t use embed code but Custom code in the head and body tags.

Maybe try this trick/idea:

1 Like

I can’t seem to get mine to work. The code isn’t updating the ‘slides per view’, and it’s not scrolling. Should I enable the ‘Limit Items’ setting for the CMS?

Preview Link

Your code missing step 1.1 and 1.2 (You should load swiper assets).
The best idea is to compare my screenshots to yours.

Related to your mistake:

1 Like

Hi @Siton_Systems,
Thanks a lot for this tutorial, I used it on multiple projects. However there is a new version swiper.js with some new naming, see: https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md. It would be really great if you can give an update or at least let us know which names need to be renamed to the new ones.

Thanks in advance.

1 Like

Thanks. This is a very rare change. I update the answer :frowning: The problem now a lot of swiper sites will not work).

This is why its better to use specific cdn version - list her:

1 Like

Thanks @Siton_Systems this did the trick.
In the change log I found they recommend to add:

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

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Would you advice to add both as well?

NO - Both files are the same (One minify and one not).
Its better to use the minify version .min (reduce file size).

Open this files to see the difference:

not minify:
https://unpkg.com/swiper/swiper-bundle.css

minify:
https://unpkg.com/swiper/swiper-bundle.min.css

The term:

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. https://developers.google.com/speed/docs/insights/MinifyResources

I love swiper.js, but on ios (ipad and iphone) it has a few little white flashes while dragging. I found not much about it how to fix it. It should be resolved in the newer versions, but for me it still happens. Does anyone know a solution?

Klaus

Can’t see any flashing. Also, the official docs example gives you “flashes” (-or- only on webflow)?

Try this (Very old issue):

The best idea is to open new GitHub issue her:

you are right, its only on my sliders in webflow. The demos on the swiper website work.

Here is my link. But I will check the hints above. Thank you!

It just happens a few times. not always.

https://wethepeople-ccdf94.webflow.io/stories/new-teamrider-los-locos
(the first slider on top)

https://preview.webflow.com/preview/wethepeople-ccdf94?utm_medium=preview_link&utm_source=designer&utm_content=wethepeople-ccdf94&preview=434778a62368093259bdabde3d83e210&pageId=5ebd4a328008e87c7dbb1e3a&itemId=5ebd4a328008e8641dbb1ec5&mode=preview

This is awesome, thanks! I am wondering is there a way to move the NEXT and PREV buttons off of the pictures? Like on my site i have white space to the sides i want to put them in but I cannot figure out how to make them move. I also have more than one, so I only want some of them to do this behavior? Any help would be appreciated!

Try this (Or google it you find more examples).

Or try H idea above.

Anyway no easy “one-click” way (For now).

Hi Ezra! Great Tutorial!! Just wonder if its possible to have custom pagination outside the swiper like you showed us for the arrow navigation? I want to build color buttons which jimps to a certain imag but outside of the slider…

Regards
Klaus

For now No. Solution only by custom code (More complex):

Or design/data change by Pagination API & renderBullet function - demo (No way to handle this by webflow designer - the bullets generate by code):

Hi @Siton_Systems !

First a big thank you for this great tutorial!! I love it!
I also managed to make it work on my page and created some custom arrows outside the slider.
Unfortunately there is still this blue frame around the arrow once I clicked it and I can’t figure out how to get rid of it.

Thank you for helping!