Swiperでパララックス スライダーを実装する方法 - サムネイル付き

今回はSwiper.jsを使ってパララックスするスライダーの実装方法を紹介します。奥行きのあるスライダーを実装したい方にオススメです。
実装内容は以下。
- Swiperの4系を使用(IE対策のため)
- imagesLoaded.jsで背景画像の読み込み確認をする
- IEとEdgeではガタつきがあるのでフェードに切り替える
- jQueryは使わない
説明する環境は以下。
- macOS Mojar v10.14.6
- Visual Studio Code v1.44.2
Swiperを使ってパララックス スライダーの実装する方法
最新のSwiperはバージョン5までリリースされていますがIE未対応なため、4系のものを使用します。また背景画像の読み込みが完了したタイミングでSwiperを実行したいので、imagesLoaded.jsを使用します。
必要なライブラリを読み込む
まずはSwiper本体とimagesLoaded.jsを読み込みましょう。2つともCDNが用意されているので、以下を書き加えるだけで読み込めます。
<!-- swiper専用css-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"/>
<!-- imagesLoaded.js -->
<script src="//cdn.jsdelivr.net/npm/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<!-- swiper.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
ダウンロードして読み込みたい方は公式サイトからどうぞ。
HTMLに書くこと
スライダー部分とサムネイルが連動したHTML構造は以下になります。デモサイトでは5枚のスライドを使っていますが、コードが長くなるため、1枚分のコードしか載せていません。デモサイトでは全部のコードを載せているので参考にしてみてください。
<div class="main-visual__slider">
<!-- swiperメイン部分 -->
<div class="swiper-container swiper-container-main js-slider-main">
<!-- swiper-wrapper -->
<div class="swiper-wrapper">
<!-- swiper-slide001 -->
<div class="swiper-slide">
<div
class="swiper-bgimg"
style="background-image: url('./images/swiper-img01.jpg');"
data-swiper-parallax-x="80%"
></div>
<div class="swiper__boby">
<h3 class="swiper__heading">SLIDER001</h3>
<p
class="swiper__txt"
data-swiper-parallax-x="30%"
data-swiper-parallax-opacity="0"
>
Gorillas are ground-dwelling, predominantly herbivorous apes
that inhabit the forests of central Sub-Saharan Africa. The
genus Gorilla is divided into two species: the eastern
gorillas and the western gorillas (both critically
endangered), and either four or five subspecies. They are
the largest living primates.
</p>
</div>
</div><!-- /swiper-slide001 -->
<!--
swiper-slide002〜005までswiper-slide001の
繰り返しのため省略
-->
</div><!-- /swiper-wrapper -->
<!-- swiper-button-next -->
<div class="swiper-button-next swiper-button-white"></div><!-- /swiper-button-next -->
</div><!-- /swiperメイン部分終了 -->
<!-- swiperサムネイル部分 -->
<div class="swiper-container swiper-container-nav js-slider-nav">
<!-- swiper-wrapper -->
<div class="swiper-wrapper" role="navigation">
<!-- swiper-slide001 -->
<div class="swiper-slide">
<div
class="swiper-bgimg"
style="background-image: url('./images/swiper-img01.jpg');"
></div>
<div class="swiper__boby">
<p class="swiper__heading">SLIDER001</p>
</div>
</div><!-- /swiper-slide001 -->
<!--
swiper-slide002〜005までswiper-slide001の
繰り返しのため省略
-->
</div><!-- /swiper-wrapper -->
</div><!-- /swiperサムネイル終了 -->
</div><!-- main-visual__slider -->
重要な部分を説明します。
Swiperを動かすために必要なHTML構造とクラス名は決まっているのでそこから外れないようにしましょう。そして以下の2つのクラス名はメイン部分とサムネイル部分のスライドを動かすために必要なので忘れずつけてください。
- 3行目にあるjs-slider-main … メイン部分を動かすために必要
- 40行目にあるjs-slider-nav … サムネイル部分を動かすために必要
あとはパララックスさせるために必要なdata属性には以下を使っています。
- data-swiper-parallax-x … 水平方向の表示される前の移動位置を指定
- data-swiper-parallax-opacity … 表示される前の透明具合を指定
Sassで書くこと
CSSで書くとコードが長くなるのでSassで書いています。コードの書き方やベンダープレフィックスはご自身の環境にあわせてください。
.swiper-slide {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-bgimg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
//メイン部分
.swiper-container-main {
height: calc(100vh - 216px);
min-height: 700px;
transition: opacity 0.6s ease, transform 0.3s ease;
.swiper__boby {
position: absolute;
top: 32%;
left: 0;
width: 50%;
padding-left: 5%;
color: #fff;
.swiper__heading {
font-size: 30px;
margin-bottom: 30px;
}
.swiper__txt {
font-size: 13px;
line-height: 1.4;
transform: translateX(50px);
}
}
&:hover {
.swiper-button-prev,
.swiper-button-next {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
}
}
//ナビゲーション部分
.swiper-container-nav {
width: 50%;
height: 9.5%;
position: absolute;
right: 0;
bottom: 2.5%;
z-index: 10;
.swiper-slide {
cursor: pointer;
&.swiper-slide-active {
.swiper__boby {
&:before {
background-color: rgba(#000, 0);
}
}
}
&.swiper-slide-duplicate-active {
.swiper__boby {
&:before {
background-color: rgba(#000, 0);
}
}
}
}
.swiper__boby {
position: relative;
width: 100%;
height: 100%;
&:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(#000, 0.55);
transition: background-color 0.3s ease;
content: "";
z-index: 1;
}
&:hover {
&:before {
background-color: rgba(#000, 0);
}
}
.swiper__heading {
position: absolute;
width: 100%;
top: 37%;
left: 9%;
color: #fff;
font-size: 15px;
z-index: 2;
}
}
}
//右のページ送り
.swiper-button-next {
width: 38px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
transform: translateX(-20px);
}
/*
SP表示用
--------------------------------*/
@media screen and (max-width: 560px) {
.swiper-container-main {
height: calc(100vh - 60px);
min-height: auto;
.swiper__boby {
top: 25%;
width: 90%;
padding-left: 5%;
padding-right: 5%;
}
}
.swiper-container-nav {
width: 100%;
height: 9.5%;
position: absolute;
right: 0;
bottom: 0;
z-index: 10;
}
}
メインスライダー部分の高さをvhで設定していますが、iOS版Safariのことも考えるとJavaScriptで高さを設定したほうが良いでしょう。以下が実装に役立ちます。
Javascriptで書くこと
init.jsなどファイルを作成してパララックスで動かす指定を書いていきます。EdgeとIE11ではスライダーのガタつきが強いので、ユーザーエージェント判定でパララックスではなくフェード表示に切り替えています。
//背景画像を読み込んでるか確認
imagesLoaded(".swiper-bgimg", { background: true }, function () {
var mainSliderTarget = ".js-slider-main", //メイン部分のスライダー
navSliderTarget = ".js-slider-nav"; //ナビ部分のスライダー
var userAgent = window.navigator.userAgent.toLowerCase();
// Main Slider
if (
userAgent.indexOf("msie") != -1 ||
userAgent.indexOf("trident") != -1 ||
userAgent.indexOf("edge") != -1
) { //EdgeとIEのときはfade
var mainOptions = {
loop: true, //ループさせる
speed: 2000, //2秒かけながら移動
effect: "fade", //フェードの指定
loopAdditionalSlides: 10, //ループのときに作られるクローンの枚数。5枚表示させるなら倍の数
navigation: { //ページ送りを動かす指定
nextEl: ".swiper-button-next",
},
};
} else { //それ以外はパララックスさせる
var mainOptions = {
loop: true,
speed: 1200,
parallax: true, //パパラックスさせる
loopAdditionalSlides: 10,
navigation: {
nextEl: ".swiper-button-next",
},
};
}
var mainSlider = new Swiper(mainSliderTarget, mainOptions); //.js-slider-mainとそのオプションをセットする
// Navigation Slider
if (
userAgent.indexOf("msie") != -1 ||
userAgent.indexOf("trident") != -1 ||
userAgent.indexOf("edge") != -1
) {
var navOptions = {
loop: true,
loopAdditionalSlides: 10,
speed: 2000,
autoplay: {
//ナビのほうにautoplayを書くこと
delay: 3000, //3秒後に次のスライドへ
disableOnInteraction: false, //ユーザー側で操作してもスライドを止めない
},
//spaceBetween: 5, //ナビスライド同士を何px開けるか指定
slidesPerView: 3, //画面状で見れるスライドの枚数を指定
centeredSlides: true, //アクティブのスライドを表示にする
touchRatio: 0.2, //どのくらいスワイプしたら次の画像に移動するか
slideToClickedSlide: true, //スワイプ中にクリックした時、今の動きをキャンセルしてクリックした側のスライドに移動する
direction: "horizontal", //スライドする方向について。縦はvertica、横はhorizontal
};
} else {
var navOptions = {
loop: true,
loopAdditionalSlides: 10,
speed: 1200,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
//spaceBetween: 5,
slidesPerView: 3,
centeredSlides: true,
touchRatio: 0.2,
slideToClickedSlide: true,
direction: "horizontal",
};
}
var navSlider = new Swiper(navSliderTarget, navOptions); //js-slider-navとオプションをセットする
// メインスライダーとナビを紐づける
mainSlider.controller.control = navSlider; //メインスライダーとナビの紐付け
navSlider.controller.control = mainSlider; //ナビとメインスライダーの紐付け
});
さいごに
Swiperでパララックス スライダーを実装する方法を紹介しました。サイトに奥行きを出したいときに使えるスライダーです。注意点としてはSwiper5系だとIE11でループが機能しなかったので、必ず4系を使うようにしましょう。
Swiper4系のパラメーターについては以下のサイトで詳しく説明されているので参考にしてみてください。
Swiperを使ったスライダーについては、他の記事にも書いているので興味のある方はどうぞ。