【Swiper】自由につまんで動かせるスライダーの作り方

サンプル

こんなのが作れます｡

ドラッグアンドドロップして､スライドを移動してみてください｡

サンプル : よくあるスライダー

スライドをスワイプすると自由に動かせます｡

慣性スクロール有りバージョン
勢いよく動かすとスーっと動かせます｡ (上のサンプルのオプションを変えるだけです)

サンプル : 一定スピードのスライダー

一定スピードで動かしたいけど､流れてくるのを待ちたくない って時にも使えます｡

慣性スクロール有りバージョン
(上のサンプルのオプションを変えるだけです)

共通のHTML

HTMLは共通です｡
スライドの数が少ないと､勢いよく動かした時にスライドの生成が追いつかないことがありました｡
同じのを2セット設置するなどして､多めにスライドを用意することをおすすめします｡

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
		<div class="swiper-slide"><img src="img04.jpg"></div>
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
		<div class="swiper-slide"><img src="img04.jpg"></div>
	</div>
</div>

よくあるスライダーの作り方

自由につまんで動かせるよくあるスライダーの作り方です｡

以下のようにSwiperを実行します｡

let slideLen = document.querySelectorAll(".swiper .swiper-slide").length;

const initSwiper = () => {
	const mySwiper = new Swiper('.swiper', {
		slidesPerView: 'auto', //スライドを複数枚見せるための設定
		spaceBetween: 8, //スライドの左右の余白
		loop: true,
		loopedSlides: slideLen,
		speed: 1000, //アニメーションの速度
		autoplay: {
			delay: 2000, //自動再生のスピード
			disableOnInteraction: false,
		},
		freeMode: {
			enabled: true,
			momentum: false, //trueにすると慣性スクロールがオンになる
		},
		grabCursor: true,
		on: {
			touchEnd: (swiper) => {
				swiper.slideTo(swiper.activeIndex + 1); //スワイプ後に､次のスライドをactiveにセット
			}
		}
	});
};

window.addEventListener('load', function(){
	initSwiper();
});

スライドの余白や､スライダーのスピードはお好みで調整してください｡

16行目の「momentum」をtrueにすると慣性スクロールがオンになります｡

こちらの記事を参考にさせていただきました｡

【v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー – 東京のホームページ制作 / WEB制作会社 BRISK

.swiper-slide {
	width: 200px;
}

一定スピードのスライダーの作り方

自由につまんで動かせる､一定のスピードで横に流れ続けるスライダーの作り方です｡

以下のようにSwiperを実行します｡

let slideLen = document.querySelectorAll(" .swiper .swiper-slide").length;

const initSwiper = () => {
	const mySwiper = new Swiper(' .swiper', {
		slidesPerView: 'auto', //スライドを複数枚見せるための設定
		spaceBetween: 8, //スライドの左右の隙間
		loop: true,
		loopedSlides: slideLen,
		speed: 6000, //流れる速度
		autoplay: {
			delay: 0,
			disableOnInteraction: false,
		},
		freeMode: {
			enabled: true,
			momentum: false, //trueにすると慣性スクロールがオンになる
		},
		grabCursor: true,
		on: {
			touchEnd: (swiper) => {
				swiper.slideTo(swiper.activeIndex + 1);
			}
		}
	});
};

window.addEventListener('load', function(){
	initSwiper();
});

スライドの余白や､流れるスピードはお好みで調整してください｡

16行目の「momentum」をtrueにすると慣性スクロールがオンになります｡

こちらの記事を参考にさせていただきました｡

【v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー – 東京のホームページ制作 / WEB制作会社 BRISK

.sample03 .swiper-wrapper {
	-webkit-transition-timing-function: linear !important;
	transition-timing-function: linear !important;
}
.swiper-slide {
	width: 200px;
}

コメント

「できました！」などの報告もお待ちしております｡