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

Javascript
2019.12.08

「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>

表示させたい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 -->

プロパティを設定する

以下の例では、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>

デモページ

全体のソース

<!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>

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
}		 画面サイズと、画像サイズごとに設定するプロパティを指定する。カンマ（,）区切りで複数指定可能。

コメント

タイトルとURLをコピーしました