デモページはこちら

swiper.jsでスライドを一定速度で無限ループさせます。スライダー全体の横幅を決めて表示スライドを1つにし、はみ出したスライドをCSSで表示させる実装になります。htmlのコードは以下の通りです。

<div class="container">
	<div class="swiper-container c-slider-container js-slider">
		<ul class="swiper-wrapper c-slider">
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper01.jpg)"></span>
				</figure>
			</li>
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper02.jpg)"></span>
				</figure>
			</li>
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper03.jpg)"></span>
				</figure>
			</li>
		</ul>
	</div>
</div>

CSSのコードです。スライダー全体を囲ったクラス名containerのdivタグにoverflow: hidden;を指定します。この指定がないとブラウザに横スクロールバーが表示されてしまいます。クラス名swiper-containerのdivタグにはwidth: 240px;を指定して、スライダー全体の横幅を固定します。また、クラス名swiper-containerのdivタグはswiper.cssでoverflow: hidden;が指定されていますが、これをoverflow: visible;に書き換えます。これでスライダー全体の横幅240pxの指定からはみ出したスライドが、全て画面上に表示されるようになります。クラス名swiper-wrapperのulタグにはtransition-timing-function: linear;を指定して、一定の速度で流れるスライダーにします。

.container {
	overflow: hidden;
}
.c-slider-container {
	width: 240px;
	margin: 0 auto;
	overflow: visible;
}
.c-slider {
	transition-timing-function: linear;
}
.c-slider-item-photo {
	position: relative;
	overflow: hidden;
	padding-bottom: 60%;
}
.c-photo-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: center;
	background-size: cover;
}

JavaScriptのコードです。slidesPerView: 1を指定して、スライダー全体の横幅240pxに対する表示スライド数を1つにします。この場合ソース上のスライドは、全てのスライド数プラス前後のスライド1つづつになるため、画面幅によってはループ時にスライドが切れてしまいます。そこでloopAdditionalSlides: 4を指定してループ時に作成されるクローン数を増やします。loopAdditionalSlidesの初期値は0です。また、speed: 5000を指定してスライドの切り替わるスピードをゆっくりに、autoplay: {delay: 0}を指定して自動再生のスライドの表示時間を0にします。

var swiper01 = new Swiper('.js-slider', {
	loop: true,
	slidesPerView: 1,
	loopAdditionalSlides: 4,
	centeredSlides: true,
	allowTouchMove: false,
	speed: 5000,
	autoplay: {
		delay: 0,
	}
});