[Swiper] How to support slides of various widths (variableWidth)

2023-09-10

Here's how to support slides of various widths (variableWidth) with the jQuery-free slider plugin "Swiper".

Sample

You can create something like this.

HTML

Specify thewidth for each slide.(You can also do this with CSS)
Also, since the slidesdidn't work well with 4, duplicate them to increase toabout 8 slides.
Dots and pager are optional.

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="width: 180px;"><img src="img/img01.jpg"></div>
		<div class="swiper-slide" style="width: 640px;"><img src="img/img02.jpg"></div>
		<div class="swiper-slide" style="width: 320px;"><img src="img/img03.jpg"></div>
		<div class="swiper-slide" style="width: 480px;"><img src="img/img04.jpg"></div>

		<div class="swiper-slide" style="width: 180px;"><img src="img/img01.jpg"></div>
		<div class="swiper-slide" style="width: 640px;"><img src="img/img02.jpg"></div>
		<div class="swiper-slide" style="width: 320px;"><img src="img/img03.jpg"></div>
		<div class="swiper-slide" style="width: 480px;"><img src="img/img04.jpg"></div>
	</div>
	<!-- Dots -->
	<div class="swiper-pagination"></div>
	<!-- Pager -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

JS

Execute Swiper as shown below.
The important part is to specify slidesPerView: "auto" and centeredSlides: true on the 3rd and 4th lines.

const swiper = new Swiper(".swiper", {
	loop: true,
	slidesPerView: "auto", //variablewidthにするため､autoを指定
	centeredSlides: true, //スライドを中央に寄せる
	pagination: {
		el: ".swiper-pagination",
		clickable: true
	},
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	}
});

With this, you can support slides of various widths (variableWidth).

I referred to the demo "Centered auto" on the official Swiper website.