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 
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 */
});
}
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.