jQuery不要でスライダーを実装する「Swiper」

2019/12/08 2021/01/01

「Swiper」を使えば非常に簡単にスライダーを実装できるので、紹介したいと思います。

スライダーのイメージはこんな感じです。

Swiperの使い方

cssとスクリプトを読み込む

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

1 2	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

表示させたいimgを差し替える

<div id="slider-contents">
  <div class="container">
    <div class="swiper-container swiper-container-horizontal">
      <div class="swiper-wrapper">
        <!-- スライダー画像-->
        <div class="swiper-slide swiper-slide-duplicate-next">
          <img src="./img/sample1.jpg" alt="">
        </div>
        <div class="swiper-slide swiper-slide-duplicate-next">
          <img src="./img/sample2.jpg" alt="">
        </div>
        <div class="swiper-slide swiper-slide-prev">
          <img src="./img/sample3.jpg" alt="">
        </div>
        <div class="swiper-slide swiper-slide-prev">
          <img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide-active">
          <img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt="">
        </div>
        <!-- Slides end-->
      </div>
      <!-- swiper-wrapper end -->
      <div class="swiper-pagination swiper-pagination-bullets">
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
      </div>
      <!-- swiper-pagination end -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- pavigation buttons end -->
    </div>
    <!-- swiper-container end-->
  </div>
  <!-- container end-->
</div>
<!-- #contents end -->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

プロパティを設定する

以下の例では、loop: true、autoplay：3000とすることで、3秒おきに画像を繰り返しスライドさせる設定にしてみました。

		<script>
		var mySwiper = new Swiper ('.swiper-container', {
		  loop: true,
		  slidesPerView: 5,
		  spaceBetween: 10,
		  centeredSlides : true,
		  autoplay: 3000,
		  autoplayDisableOnInteraction:false,
		  pagination: '.swiper-pagination',
		  nextButton: '.swiper-button-next',
		  prevButton: '.swiper-button-prev',
		  breakpoints: {
			1050: {
		      slidesPerView: 4,
		      spaceBetween: 10
		    },
		    850: {
		      slidesPerView: 3,
		      spaceBetween: 10
		    },
		    600: {
		      slidesPerView: 3,
		      spaceBetween: 10
		    },
		    400: {
		      slidesPerView: 2,
		      spaceBetween: 5
		    }
		  }
		})
		</script>

var mySwiper = new Swiper ('.swiper-container', {

loop: true,

slidesPerView: 5,

spaceBetween: 10,

centeredSlides : true,

autoplay: 3000,

autoplayDisableOnInteraction:false,

pagination: '.swiper-pagination',

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

breakpoints: {

1050: {

slidesPerView: 4,

spaceBetween: 10

850: {

slidesPerView: 3,

spaceBetween: 10

600: {

slidesPerView: 3,

spaceBetween: 10

400: {

slidesPerView: 2,

spaceBetween: 5

}

})

</script>

デモページ

全体のソース

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset=UTF-8">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
		<style>
			.swiper-container{
				text-align: center;
			}
			.swiper-container .swiper-slide img{
				width: 160px;
				height: 100px;
				border:1px solid;
			}
			#slider-contents{
				max-width: 900px;
				margin: auto;
			    margin-top: 2em;
			    margin-bottom: 2em;
			}
			.swiper-slide {
			    flex-shrink: 0;
			    width: 100%;
			    height: 100%;
			    position: relative;
			}
			.swiper-pagination{
			    position: static;
			}
			.swiper-button-prev, .swiper-button-next{
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="slider-contents">
			<div class="container">
				<div class="swiper-container swiper-container-horizontal">
				    <div class="swiper-wrapper">
				    	<!-- スライダー画像-->
				        <div class="swiper-slide swiper-slide-duplicate-next">
				        	<img src="./img/sample1.jpg" alt="">
				        </div>
				        <div class="swiper-slide swiper-slide-duplicate-next">
				        	<img src="./img/sample2.jpg" alt="">
				        </div>
				        <div class="swiper-slide swiper-slide-prev">
				        	<img src="./img/sample3.jpg" alt="">
				        </div>
				        <div class="swiper-slide swiper-slide-prev">
				        	<img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt="">
				        </div>
				        <div class="swiper-slide swiper-slide-active">
				        	<img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt="">
				        </div>
						<!-- Slides end-->
					</div>
					<!-- swiper-wrapper end -->
				    <div class="swiper-pagination swiper-pagination-bullets">
				    	<span class="swiper-pagination-bullet"></span>
				    	<span class="swiper-pagination-bullet"></span>
				    	<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
				    </div>
				    <!-- swiper-pagination end -->
				    <div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>
				    <!-- pavigation buttons end -->
				</div>
				<!-- swiper-container end-->
			</div>
			<!-- container end-->
		</div>
		<!-- #contents end -->

		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
		<script>
		var mySwiper = new Swiper ('.swiper-container', {
		  loop: true,
		  slidesPerView: 5,
		  spaceBetween: 10,
		  centeredSlides : true,
		  autoplay: 3000,
		  autoplayDisableOnInteraction:false,
		  pagination: '.swiper-pagination',
		  nextButton: '.swiper-button-next',
		  prevButton: '.swiper-button-prev',
		  breakpoints: {
			1050: {
		      slidesPerView: 4,
		      spaceBetween: 10
		    },
		    850: {
		      slidesPerView: 3,
		      spaceBetween: 10
		    },
		    600: {
		      slidesPerView: 3,
		      spaceBetween: 10
		    },
		    400: {
		      slidesPerView: 2,
		      spaceBetween: 5
		    }
		  }
		})
		</script>
	</body>
</html>

100

101

102

103

104

105

106

107

108

<!DOCTYPE html>

<head>

<style>

.swiper-container{

text-align: center;

}

.swiper-container .swiper-slide img{

width: 160px;

height: 100px;

border:1px solid;

}

#slider-contents{

max-width: 900px;

margin: auto;

margin-top: 2em;

margin-bottom: 2em;

}

.swiper-slide {

flex-shrink: 0;

width: 100%;

height: 100%;

position: relative;

}

.swiper-pagination{

position: static;

}

.swiper-button-prev, .swiper-button-next{

top: 50px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

var mySwiper = new Swiper ('.swiper-container', {

loop: true,

slidesPerView: 5,

spaceBetween: 10,

centeredSlides : true,

autoplay: 3000,

autoplayDisableOnInteraction:false,

pagination: '.swiper-pagination',

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

breakpoints: {

1050: {

slidesPerView: 4,

spaceBetween: 10

850: {

slidesPerView: 3,

spaceBetween: 10

600: {

slidesPerView: 3,

spaceBetween: 10

400: {

slidesPerView: 2,

spaceBetween: 5

}

})

</script>

</body>

</html>

imgだけ変えればすぐに使うことができるので、画像サイズやプロパティを変更しててみてください。

Swiperのメインプロパティ

調べてみるとものすごい数プロパティがあるようなので、ここではよく使うであろう最低限のプロパティを紹介します。

プロパティ	値	説明
loop	true/false	繰り返し設定
slidesPerView	5	一度に表示するスライド数の設定
spaceBetween	10	スライドの間隔を指定（単位：px）
centeredSlides	true/false	現在のスライドを中央に表示するかを設定
autoplay	3000	自動スライドする間隔。単位はms（3000ms＝3秒）
autoplayDisableOnInteraction	true/false	スライド操作後、自動再生を停止する設定。
pagination	.swiper-pagination	ページネーションのセレクタ名を指定
nextButton	.swiper-button-next	ボタンのセレクタ名を指定
prevButton	.swiper-button-prev	ボタンのセレクタ名を指定
breakpoints	400: { slidesPerView: 2, spaceBetween: 5 }	画面サイズと、画像サイズごとに設定するプロパティを指定する。カンマ（,）区切りで複数指定可能。