Blog スタッフブログ

レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」

Category | Blog
/ 27,600views

こんにちは、デザイナーの奥田です。
最近フロントエンドでは「脱jQuery」なんて言われていますね。
まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。
さて、今回は「もう最近の案件はこれしか使っていないんじゃないか?」というぐらい高機能で便利なスライダーをご紹介いたします。

Table of contents

  1. Swiperの使い方
  2. カルーセル表示にする
  3. レスポンシブに対応する
  4. PC時はグリッド表示、スマホ時にスライドにする
  5. サムネイル付きカルーセル表示
  6. その他オプション
  7. まとめ

Swiperの使い方

まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。

SwiperCDN

CSSとJSを読み込みます。

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

.swiper-container以下に.swiper-wrapper、.swiper-slideを記述し、スクリプトを記述することで簡単にスライド表示することが可能です。

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

effectは”slide”,”fade”の他に”cube”や”flip”,”coverflow”などがあります。(※slidesPerViewなどで表示枚数を増やすと”slide”、”coverflow”以外は機能しません。)

var mySwiper = new Swiper ('.swiper-container', {
	effect: "flip",
	loop: true,
	pagination: '.swiper-pagination',
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev',
})

以下にDemoを用意しています。

Demoをみる

カルーセル表示にする

1枚ずつではなくカルーセル表示することも可能です。
slidesPerViewにカルーセル表示したい枚数、spaceBetweenに間隔を指定し、centeredSlidesをtrueにするとセンター基準で表示できます。

var mySwiper = new Swiper ('.swiper-container', {
	loop: true,
	slidesPerView: 2,
	spaceBetween: 10,
	centeredSlides : true,
	pagination: '.swiper-pagination',
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev'
})

Demoをみる

レスポンシブに対応する

カルーセルの場合、レスポンシブのサイトでスマホ表示をすると画像が小さくなりすぎてしまいます。
そんな時は breakpoints オプションに最大幅の指定とそれ以下での挙動を記述できます。
PCでは2枚表示、スマホ以下では1枚のスライドになるようにした例が以下です。

var mySwiper = new Swiper ('.swiper-container', {
	loop: true,
	slidesPerView: 2,
	spaceBetween: 10,
	centeredSlides : true,
	pagination: '.swiper-pagination',
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev',
	breakpoints: {
		767: {
			slidesPerView: 1,
			spaceBetween: 0
		}
	}
})

Demoを用意しました。ウィンドウを大きくしたり小さくしたりしてみてください。

Demoをみる

以下のような挙動になったとおもいます。

PC表示
スマホ表示

PC時はグリッド表示、スマホ時にスライドにする

PCではグリッド表示にしていてもスマホでは縦にずらーっと並んでしまう場合があります。
そんな時、「スマホ時のみカルーセルにできたら・・・」と思う方も多いと思います。
swiperでは以下のようにすることで対応できます。

var swiper = undefined;
var winW =  window.innerWidth;
var swiperElement = document.getElementById("slider");
var swiperWrapper = swiperElement.getElementsByClassName("swiper-wrapper");
var swiperSlide = swiperElement.getElementsByClassName("swiper-slide");
var options = {
	loop: true,
	centeredSlides : true,
	pagination: '.swiper-pagination',
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev',
	breakpoints: {
		991: {
			slidesPerView: 2,
			spaceBetween: 10
		},
		767: {
			slidesPerView: 1,
			spaceBetween: 0
		}
	}
};
function initSwiper() {
	if(swiperElement){
		var screenWidth = window.innerWidth;
		if(screenWidth > 992 && swiper == undefined) { 
			swiper = new Swiper('#slider', options);
		} else if (screenWidth > 991 && swiper != undefined) {
			swiper.destroy();
			swiper = undefined;
			for( var i=0;i<swiperWrapper.length; i++ ) {
				swiperWrapper[i].removeAttribute('style');
			}
			for( var i=0;i<swiperSlide.length; i++ ) {
				swiperSlide[i].removeAttribute('style');
			}
		}
	}
}
initSwiper();

window.addEventListener('resize',initSwiper);

Demoをみる

挙動としてはWindow幅が992以上のときはswiper.destroy();をし、余計なAttributeを削除します。
991以下で2枚ずつのカルーセルに、767以下では1枚ずつのスライド表示になります。
なお、CSSで以下を記述することでグリッド表示にすることができます。

@media(min-width: 992px){
	.swiper-wrapper{
		flex-wrap:wrap;
	}
	.swiper-slide{
		width: 33.3%;
	}
	.swiper-button-prev,.swiper-button-next,.swiper-pagination{
		display: none;
	}
}

サムネイル付きカルーセル表示

カルーセル表示でサムネイルを表示したい場合は以下のようにします。

<div id="slider" class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img/img01.jpg" ></div>
		<div class="swiper-slide"><img src="img/img02.jpg" ></div>
		<div class="swiper-slide"><img src="img/img03.jpg" ></div>
		<div class="swiper-slide"><img src="img/img01.jpg" ></div>
		<div class="swiper-slide"><img src="img/img02.jpg" ></div>
		<div class="swiper-slide"><img src="img/img03.jpg" ></div>
	</div>
	<div class="swiper-button-prev swiper-button-white"></div>
	<div class="swiper-button-next swiper-button-white"></div>
</div>

<div id="thumbs" class="swiper-container mb60">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img/img01.jpg" ></div>
		<div class="swiper-slide"><img src="img/img02.jpg" ></div>
		<div class="swiper-slide"><img src="img/img03.jpg" ></div>
		<div class="swiper-slide"><img src="img/img01.jpg" ></div>
		<div class="swiper-slide"><img src="img/img02.jpg" ></div>
		<div class="swiper-slide"><img src="img/img03.jpg" ></div>
	</div>
</div>

スライドを2つ用意し、同期させるようなイメージです。

var slider = new Swiper ('#slider', {
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev'
})
var thumbs = new Swiper('#thumbs', {
	centeredSlides: true,
	spaceBetween: 10,
	slidesPerView: "auto",
	touchRatio: 0.2,
	slideToClickedSlide: true
});
slider.params.control = thumbs;
thumbs.params.control = slider;

Demoをみる

その他オプション

その他にも沢山のオプションがありますがよく使うであろうオプションをまとめておきました。
ぜひご参考にしてください。

オプション 初期値 説明
initialSlide 0 最初に表示するスライド(0からの連番)
direction horizontal スライドの方向(’horizontal’が横、’vertical’で縦になります。)
speed 300 スライドする際の速度1/1000秒で指定します。
autoplay スライドを自動で動かす場合のオプション。
1/1000秒で間隔を指定することで自動でスライドします。※2000なら2秒間隔
loop false スライドをloopさせるかどうか
paginationClickable false ページネーションをクリックした時スライドさせるかどうか
simulateTouch true マウス操作でスライドさせるか
parallax false trueにすることでparallax(視差効果)を実装できます。
※スライド内の要素にdata-swiper-parallax=”-400″や、data-swiper-parallax-duration=”800″ 等を指定することで可能になります。

まとめ

いかがだったでしょうか。
高機能なスライダーがjQueryなしで実装でき、レスポンシブにも柔軟に対応してくれる素晴らしいスライダーです。
ぜひ試してみてください。

Category | Blog
Author | Mineo Okuda / 27,600views

Company information

〒651-0087
神戸市中央区御幸通 8-1-6 神戸国際会館 22F

Contact us

WEBに関するお問い合わせは
078-570-5755 (10:00 - 18:00)