Be able to set a number of duplicated slides to fix the new loop behavior on certain scenarios

[XavierCrespin]

Clear and concise description of the problem

As can be seen here : Swiper V11 loop issue and since the V9 update that changed the loop behavior, in design cases where the slides overflow the main container, there is not enough duplicated slides to cover these specific needs.
Worse, when slidesPerView = number of slides + 1, sometimes the center container only shows slidesPerView - 1,
in the above codepen example, the slidesPerView is set to 3 and when going back and forth, sometimes there are only 2 slides in the center container.
Here is an example of what I can achieve with V8 : Swiper V8 loop works

Suggested solution

A new parameter like "numberOfDuplicateSlides" to cover these specific design scenarios

Alternative

Stick to V8 for the moment on all impacted websites (unfortunately, a few).
I could duplicate manually the number of slides to artificially fix the issue, but this would break the pagination.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[nolimits4web]

There is a loopAdditionalSlides parameter for that

[XavierCrespin]

Well, loopAdditionalSlides just does not work as intended then

[rajnikakadiya]

@nolimits4web loopAdditionalSlides doesn't works as inteded because it moves slides from left to right but then left side becomes empty. There should be option numberOfDuplicateSlides like it was in older version.

[MartinTale]

Could really use this feature - loopAdditionalSlides doesn't do the trick :)

[kubiqsk]

I'm also looking for solution as swiper from version 9+ broke a lot of sliders that simply need duplicated slides.

Is there some additional library or some extension that can fix this?

[kubiqsk]

Ok, here is my very tricky-hacky solution...
This is just a first try and it works in my scenario, but I'm sure there are many usecases when it will not work...
I'm using this in on.init and on.resize

// duplicate slides if needed
const swiperWidth = swiperEl.swiper.size;
if( ! swiperEl.originalSlidesWidth ){
	swiperEl.originalSlidesWidth = swiperEl.swiper.slidesSizesGrid.reduce( ( accumulator, currentValue ) => accumulator + currentValue, 0 );
}
const allSlidesWidth = swiperEl.swiper.slidesSizesGrid.reduce( ( accumulator, currentValue ) => accumulator + currentValue, 0 );
const smallestSlide = Math.min( ...swiperEl.swiper.slidesSizesGrid );
// if all slides are smaller than swiper area and smallest slide
if( swiperWidth + smallestSlide > allSlidesWidth ){
	// calculate needed duplicates
	const existingDuplicates = Math.round( ( allSlidesWidth - swiperEl.originalSlidesWidth ) / swiperEl.originalSlidesWidth );
	const duplicatesNeeded = Math.ceil( ( swiperWidth + smallestSlide ) / swiperEl.originalSlidesWidth ) - 1 - existingDuplicates;
	// get all slides html
	if( ! swiperEl.allSlidesHTML ){
		swiperEl.allSlidesHTML = swiperEl.swiper.slides.reduce( ( accumulator, currentValue ) => accumulator + '<div class="swiper-slide swiper-slide-duplicate">' + currentValue.innerHTML + '</div>', '' );
	}
	// add duplicated slides
	for( let i = 0; i < duplicatesNeeded; i++ ){
		swiperEl.swiper.slidesEl.insertAdjacentHTML( 'beforeend', swiperEl.allSlidesHTML );
	}
	// update swiper
	swiperEl.swiper.update();
}