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="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/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="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js">
ダウンロードして読み込みたい方は公式サイトからどうぞ。
HTMLに書くこと
スライダー部分とサムネイルが連動したHTML構造は以下になります。デモサイトでは5枚のスライドを使っていますが、コードが長くなるため、1枚分のコードしか載せていません。デモサイトでは全部のコードを載せているので参考にしてみてください。
<div class="d-demo">
<div class="d-demo__heading">
<h1 class="d-demo__ttl">
<img src="./images/main-ttl.svg" alt="" />
</h1>
</div>
<div class="d-demo__slider">
<div class="swiper-container swiper-container-main js-slider">
<div class="swiper-wrapper">
<div class="swiper-slide d-demo__slide">
<div
class="d-demo__slide-bg js-loading-check"
style="background-image: url('./images/test01.jpg');"
data-swiper-parallax-x="90%"
></div>
<div class="d-demo__slide-heading">
<h3 class="d-demo__slide-ttl">SLIDER001</h3>
<p
class="d-demo__slide-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>
<!-- 2枚目以降は省略 -->
</div>
<!-- If you need navigation buttons -->
<!-- <div class="swiper-button-prev swiper-button-white"></div> -->
<div class="swiper-button-next swiper-button-white"></div>
</div>
<!-- /本体swiper -->
<!-- サムネイルswiper -->
<div class="swiper-container swiper-container-nav js-slider-nav">
<div class="swiper-wrapper" role="navigation">
<div class="swiper-slide d-demo__nav">
<div
class="d-demo__nav-bg js-loading-check"
style="background-image: url('./images/test01.jpg');"
></div>
<div class="d-demo__nav-heading">
<p class="d-demo__nav-ttl">SLIDER001</p>
</div>
</div>
<!-- 2枚目以降は省略 -->
</div>
</div>
<!-- /サムネイルswiper -->
</div>
</div>
重要な部分を説明します。
Swiperを動かすために必要なHTML構造とクラス名は決まっているのでそこから外れないようにしましょう。そして以下の2つのクラス名はメイン部分とサムネイル部分のスライドを動かすために必要なので忘れずつけてください。
- 8行目にあるjs-slider … メイン部分を動かすためのクラス名
- 40行目にあるjs-slider-nav … サムネイル部分を動かすためのクラス名
あとはパララックスさせるために必要なdata属性には以下を使っています。
- data-swiper-parallax-x … 水平方向の表示される前の移動位置を指定
- data-swiper-parallax-opacity … 表示される前の透明具合を指定
CSSで書くこと
すべてのcssを載せておきます。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
.d-demo {
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
padding-bottom: 60px;
}
.d-demo__heading{
width: 20%;
position: relative;
}
.d-demo__ttl{
width: 20%;
max-width: 55px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.d-demo__slider{
width: 80%;
}
.swiper-wrapper {
will-change: transform;
-webkit-backface-visibility: hidden;
}
.d-demo__slide {
width: 100%;
overflow: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
}
.d-demo__slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
}
.swiper-container-main {
height: calc(100vh - 216px);
transition: opacity 0.6s ease, transform 0.3s ease;
}
.d-demo__slide-heading{
position: absolute;
top: 32%;
left: 0;
width: 50%;
padding-left: 5%;
color: #fff;
}
.d-demo__slide-ttl{
font-size: 30px;
font-family: "Poppins", sans-serif;
font-weight: 800;
margin-bottom: 30px;
}
.d-demo__slide-txt{
font-size: 13px;
font-family: "Poppins", sans-serif;
font-weight: 400;
line-height: 1.4;
transform: translateX(50px);
}
.swiper-container-nav {
width: 50%;
height: 13%;
position: absolute;
right: 0;
bottom: 3.5%;
z-index: 10;
}
.d-demo__nav {
position: relative;
width: 100%;
height: 100%;
}
.d-demo__nav-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
}
.d-demo__nav:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.55);
transition: background-color 0.3s ease;
content: "";
z-index: 1;
}
.swiper-slide-active.d-demo__nav:before {
background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav:hover:before {
background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav-ttl{
font-family: "Poppins", sans-serif;
font-weight: 400;
position: absolute;
width: 100%;
top: 37%;
left: 9%;
color: #fff;
font-size: 15px;
z-index: 2;
}
メインスライダー部分の高さをvhで設定していますが、iOS版Safariのことも考えるとJavaScriptで高さを設定したほうが良いでしょう。以下が実装に役立ちます。
Javascriptで書くこと
init.jsなどファイルを作成してパララックスで動かす指定を書いていきます。EdgeとIE11ではスライダーのガタつきが強いので、ユーザーエージェント判定でパララックスではなくフェード表示に切り替えています。
imagesLoaded(".js-loading-check", { background: true }, function () {
//背景画像を読み込んでるか確認
var userAgent = window.navigator.userAgent.toLowerCase();
if (
userAgent.indexOf("msie") != -1 ||
userAgent.indexOf("trident") != -1 ||
userAgent.indexOf("edge") != -1
) {
var mainOptions = {
loop: true, //ループさせる
speed: 2000, //2秒かけながら移動
effect: "fade", //パパラックスさせる
loopAdditionalSlides: 10, //ループのときに作られるクローンの枚数。
navigation: {
nextEl: ".swiper-button-next",
//prevEl: ".swiper-button-prev", //戻るボタンが必要ならつける
},
};
} else {
var mainOptions = {
loop: true, //ループさせる
speed: 1200, //1.2秒かけながら移動
parallax: true, //パパラックスさせる
allowTouchMove: false, //pcではスライプの禁止、クリックでの移動を禁止する
loopAdditionalSlides: 10, //ループのときに作られるクローンの枚数。
navigation: {
nextEl: ".swiper-button-next",
//prevEl: ".swiper-button-prev", //戻るボタンが必要ならつける
},
};
}
var mainSliderTarget = ".js-slider", //メイン部分のスライダー
navSliderTarget = ".js-slider-nav"; //ナビ部分のスライダー
// Main Slider
var mainSlider = new Swiper(mainSliderTarget, mainOptions); //.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: {
//ナビのほうにautoplayを書くこと
delay: 3000, //3秒後に次のスライドへ
disableOnInteraction: false, //ユーザー側で操作してもスライドを止めない
},
//spaceBetween: 5, //ナビスライド同士を何px開けるか指定
slidesPerView: 3, //画面状で見れるスライドの枚数を指定
centeredSlides: true, //アクティブのスライドを表示にする
touchRatio: 0.2, //どのくらいスワイプしたら次の画像に移動するか
slideToClickedSlide: true, //スワイプ中にクリックした時、今の動きをキャンセルしてクリックした側のスライドに移動する
direction: "horizontal", //スライドする方向について。縦はvertica、横はhorizontal
};
}
var navSlider = new Swiper(navSliderTarget, navOptions); //.slider__navとオプションをセットする
// Matching sliders
mainSlider.controller.control = navSlider; //メインスライダーとナビの紐付け
navSlider.controller.control = mainSlider; //ナビとメインスライダーの紐付け
});
さいごに
Swiperでパララックス スライダーを実装する方法を紹介しました。サイトに奥行きを出したいときに使えるスライダーです。注意点としてはSwiper5系だとIE11でループが機能しなかったので、必ず4系を使うようにしましょう。
Swiper4系のパラメーターについては以下のサイトで詳しく説明されているので参考にしてみてください。
Swiperを使ったスライダーについては、他の記事にも書いているので興味のある方はどうぞ。