Streaming live at 10am (PST)

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

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

New ideas? Please OPEN SEPERATE/NEW Q

For specific issue related to swiper (Not how to get started/install) - please open Separate Question (And add link to this post).

Why?
No way for other users in the community to follow 50+ messages her (There are endless API options in Swiper).

Also, over time is someone asks “how to add custom arrows to swiper?” ==> It is easier for users to find the answer that it is in a separate question.

Thanks.