【Swiper】様々な幅のスライド (variableWidth) に対応する方法

jQuery不要のスライダープラグイン「Swiper」で､様々な幅のスライド (variableWidth) に対応する方法をご紹介｡

サンプル

こんなのが作れます｡

HTML

各スライドにwidthを指定します｡(CSSでやっても良いです)
また､スライドが4枚ではうまくいかなかったので､同じのを複製して8枚ほどに増やします｡
ドットとページャーは任意です｡

<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>
	<!-- ドット -->
	<div class="swiper-pagination"></div>
	<!-- ページャー -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

JS

以下のようにSwiperを実行します｡
肝心なのは3行目と4行目でslidesPerView: "auto"とcenteredSlides: trueを指定してください｡

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"
	}
});