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

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

1 Like

is somebody having the same issue as bellow ???.. a tiny bit of next or previous slide is showing… I set the slide and the img 100% width (max, min as well)…

Hi! Is it possible for the “cutting edge-slider” that after the first swipe, the 2nd image is centered?

For more specific answer please add screenshot.

nth-child

YES. Use slidesPerView: 'auto', and add any % combination your want for the n child slides (By nth-child selector).

Demo: https://swiperjs.com/demos/#auto_slides_per_view_carousel_mode

<style>
/* all slides */
.swiper-slide {
      width: 70%;
}
/* first slide */
.swiper-slide:nth-child(1) {
      width: 100%;
}

/* second child */
 .swiper-slide:nth-child(2) {
      width: 60%;
    }

 .swiper-slide:last-child {
     width: 25%;
  }
</style>

https://www.w3schools.com/cssref/sel_nth-child.asp

center

Use centeredSlides: true.
Demo: https://swiperjs.com/demos/#centered_slides

** You could use with loop:true

Hello Siton Systems,
Hello Webflow Community,

Thank you for this comprehensive entry, great commitment and support from your side…great!

I am currently in the process of creating a platform for online courses around personal growth with Webflow. And I urgently need a slider for mobile/smartphone that works like Udemy or Skillshare in the best case.

As I understand it on Swiper’s website and also in your entry, I can only use photos. However, each of my so-called “online course cards” has a picture in the header and below that the headline, the name of the course provider and a short info text. See here for example: https://www.viivaa.de/onlinekurse All information is read out via the CMS.

Is it possible to solve this with Swiper as I need it? Or is there another solution known, maybe there is even a webflow showcase or demo that can be recommended?

I would be very happy about help from the community and send best regards from Germany.

Mark

Hello :slight_smile:

The answer is YES. Use slidesPerGroup option.

Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1 swiper API

Demo:

Loop Mode with Multiple Slides Per Group
https://swiperjs.com/demos/#loop_mode_with_multiple_slides_per_group

For any other issue related to webflow CMS -or- “How to use slidesPerGroup” please create separate Q (Add read-only link + live URL to your Q).

Hi Ezra, thanks for your quick feedback…great! I’ll have a look at it after the weekend and try to integrate it into my site…and then give you final info if and how it worked.

Thanks for the moment and have a good weekend, many greetings

Mark

Hi Klaus, did you ever solve this issue? I am getting the same white flashes on desktop also.

I think this is a safari issue as it works fine on chrome.

I found a fix that seems to work, I added this to the

.swiper-slide { -webkit-transform: translate3d(0, 0, 0); }

Hi Siton, thanks for sharing how to implement swiper.js, it works great.

I have an issue however that I am hoping you are able to help me with I have implement swiper inside a collections list which means it is being duplicated many times. Is there away to get this working?

I did come across the js but I realise this won’t work because you can’t change the name of each instance individually within the same collection list.

const myCustomSlider = document.querySelectorAll(‘.swiper-container’);
for( i=0; i< myCustomSlider.length; i++ ) {
myCustomSlider[i].classList.add(‘swiper-container-’ + i);
var slider = new Swiper(‘.swiper-container-’ + i, {
/* Options */
});
}

My read only link is
https://preview.webflow.com/preview/big-love-co?utm_medium=preview_link&utm_source=designer&utm_content=big-love-co&preview=2d547ce360b0b4361741751e16f14691&pageId=5faf930b439fde2208373730&mode=preview

I have attached a screen shot of where it is located.

No problems Siton I have done this in this thread.

@Siton_Systems Good idea. I created a new topic here: Get a hover effect with this swiper.js

Hi @Siton_Systems - master of Swipers!

I’ve prepared a full width ‘coverflow’ swiper assets which appears to function nicely however I have an issue where the first slide on mobile portrait can’t be focused on - it simply doesn’t not move further left. Strangely enough the problem is resolved after switch the orientation of the device - any thoughts why this might be happening?

I would love any help on this one!

Read Only Link:

https://preview.webflow.com/preview/loan-the-look?utm_medium=preview_link&utm_source=designer&utm_content=loan-the-look&preview=ad772f1e10d6a24d3053f195f5a107a2&mode=preview

Hey @Siton_Systems ,

I would love if you could quickly have a look - it’s most likely something very small causing the issue. It’s the final piece of the puzzle before I can close the project so would massively appreciate it!

Thanks!

Thanks for sharing this! In case others were looking for a solution to create a swiper that pulls items from multiple collection lists instead of just one:

  1. Add the collection lists you’re looking to pull items from to your page. ie. Podcasts, Blog Posts, Demos and Videos, etc.

  2. In each of their collection items, add a div and give it a class name of “slide-content-wrapper”. Add whatever you want inside that block and connect titles/images/etc. to the CMS fields as you normally would. You can then hide the collection lists they’re in.

  3. Create a div with class “swiper-container” where you’d like the swiper to appear, and within it a div with class “swiper-wrapper” that takes up the full width of swiper-container.

  4. Use custom code to select the “swiper-wrapper” div you created, then select all divs with “slide-content-wrapper” class on the page (you can hide the collection lists they’re in, this will still work), create a clone of each slide, add a class “swiper-slide”, and append it to wrapper:

:partying_face:

1 Like

That’s a great tutorial! Thank you for sharing this to the community. Is that possible to include images and video in the same slider?

I read another thread reply by you to use it with video, but I don’t know how to implement it when CMS multi-image field and video link field.
https://discourse.webflow.com/t/video-carousel-with-cms/113519

This is how I want to achieve:

Your issue not related to swiper (But to webflow CMS).

Add two nodes inside your collection list item (video / image).
Inside your collection item setting - Use radio button and if image = true (show image, hide video // or opposite).

I understand your suggestion using conditional visibility. However, I made the collection list with source from a multi-images field from a CMS collection item. In this way, I cannot get the video source from the video field to include in that collection list. Do you have any idea how I can work with that?

Slider in slider “inception” problem

Hello,

thanks for the super tutorial! It works great!
However, I am unfortunately at my limits to build a slider in the slider.
The slider in the slider works with navigation prev and next, but it does not show me the pagination. And the client wants the images to be displayed only with clickable pagination.

I am thankful for any tip and solution.

Thanks a lot for your help!

Here are the links:
https://lessmann-v3.webflow.io/

https://preview.webflow.com/preview/lessmann-v3?utm_medium=preview_link&utm_source=designer&utm_content=lessmann-v3&preview=87353afe1bbc2322d8568d59dbcd9ed9&workflow=preview

Hi! After update to swiper 7 my website is not working in all browsers. I tried to follow the upgrade tutorial, but in firefox the swiper makes strange things with the site (Its the 1st swiper - when I delete it the problem is gone). Did anyone have this problem before?
Only on firefox pc and mac desktop.The site is like scrolling by itself.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.