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

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!

Hey @alex-design, that might just be the focus state of your arrow/buttons.

Try removing the outline using this CSS and see if it works:

<style>
.your-arrow-class:focus  {
    outline: none;
  }
</style> 

(change .your-arrow-class to the class name you have for your custom slider arrows)

2 Likes

Thank you so much @Oli.Timmis!!
Now it works! Yayyyyy! :partying_face:

2 Likes

You’re very welcome @alex-design! :webflow_heart:

I’ve not used Swiper.js before, just looking into it now.

and created some custom arrows outside the slider

Would you be able to point me in the direction of the article/tutorial you followed to get custom slider arrows outside of the slider container, please? :smiley:

Oh, sure! It is in this thread:

I didn’t use a button but a link block and put the arrow as an image inside. :slight_smile:

I hope that helps @Oli.Timmis !

Hi @Siton_Systems! Thank you for putting this together! This is my favorite slider design I’ve seen.
Unfortunately the slides are not visible and I can’t figure out why. Here is the project read-only link:
https://preview.webflow.com/preview/dr-daryl-gioffre?utm_medium=preview_link&utm_source=designer&utm_content=dr-daryl-gioffre&preview=5e596dbe8c780d001644e2507116c715&pageId=5f937375cc9203be8e924616&mode=preview
and the published link: https://dr-daryl-gioffre.webflow.io/swiper

Any help would be appreciated!

Again (Same mistake as some posts above).
You load swiper twice

Its working fine, but my question is how to control mouse scroll speed like 3000 ,2000, 1000

https://swiperjs.com/api/#mousewheel

var mySwiper = new Swiper('.swiper-container', {
  mousewheel: {
    sensitivity	: 1 /* Multiplier of mousewheel data, allows to tweak mouse wheel sensitivity */
  },
});

Hi @Siton_Systems. Really like this swiper and use it on several project. But there is one thing I can not work out and I hope you can help me with. I want to change the next/previous button styling to go from the default icon to this icon: Schermafbeelding 2020-11-16 om 15.20.24

https://preview.webflow.com/preview/the-lastword?utm_medium=preview_link&utm_source=dashboard&utm_content=the-lastword&preview=88cdd731a7946a614bcbc34041fd0089&mode=preview

I have followed your steps in making a button out side of the slider with a certain style and then use that class name. But somehow it’s not working on my side. Perhaps @alex-design could have a look as well, as I read see made it work.

Thanks!

Hi @Siton_Systems,
I really love your workaround and it helped me out at many positions in my project.

I have one question and one problem, can any of you help me?
My read-only link
Question:
Is it possible to hide the arrows and navigation bullets if there’s only one Image in the CMS gallery? (In my project this can change individual by each CMS item)
image

Problem:
The Slider looks pretty well


But I included a Lightbox and by clicking on an Image in the Slider there are too many / duplicated images in the Lightbox thumbnail. What did I wrong and how can I fix this?

Thank you a lot :slight_smile:
Kati

After a short break came the enlightenment:

   .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
  	display: none;
  }

So now I’m looking for a solution for the bullet :smiley:

The problem occurs only if
loop: true
is set in the <script> part. I can live without the loop, but maybe there is still a solution to this problem.

Yes. Try:

watchOverflow When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding

var mySwiper = new Swiper('.swiper-container', {
   watchOverflow: true; 
});
1 Like

Swiper use ::after - ::before - solution only by Custom CSS.

Or the idea above H. Create custom next/prev buttons (Outside of the slider)
For this button: (Use absolute position to put the arrows above the slider).

awesome help!!! @Siton_Systems I was working on this for couple days… I was able to make a simple slider but now im trying to go further and put a img slider as a nested collection in a parent collection grid… but no success… =( maybe u can help me… pleeeeeease…

tk u already…

my link: https://selecta-hotsites.webflow.io/teste-custom-slider

Like Airbnb cards slider (Nice Idea).

In general - always check/read red console errors.

Fix this (Change lazy = true to lazy: true)

:face_with_hand_over_mouth: OMG!!! so sorry I didn’t note that… now works perfect!! tks!!!

1 Like