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

Community resources Webflow Tips
27

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

Or try H idea above.

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

28

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

29

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

30

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.

Bildschirmfoto 2020-10-20 um 09.01.43
Bildschirmfoto 2020-10-20 um 09.01.43398×940 2.31 KB

Thank you for helping!

31

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
32

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

2 Likes
33

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:

34

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 !

35

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!

36

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

image
image658×528 33.6 KB

38

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

39

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

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

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!

41

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

image
image971×458 111 KB

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?
image
image1187×881 146 KB

Thank you a lot :slight_smile:
Kati

42

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.

43

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
44

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

45

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

46

Like Airbnb cards slider (Nice Idea).

In general - always check/read red console errors.

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

image
image1486×539 165 KB

47

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

1 Like