練習用のファイル「advance-thumbs.html」の、PORTFOLIOセクションを以下のようなスライダーにします。
Demosスライダーとカスタマイズ
Swiper公式サイトでは、よく使われるスライダー、スライダー設定のデモが公開されています。
JSを使ったオプションの設定だけではなく、CSSも掲載されています。 作りたいスライダーに近いデザインのコードを写すと、イチから自分で調べて書くよりも短時間でできます。
1. Demosのコードをコピー
では、Demosの中から、作りたいデザインに近いものを探しましょう。
Swiper公式サイト / Swiper Demos
https://swiperjs.com/demos
左メニューから『Slides per view』を選択してください。 複数のスライド要素が一度に表示される、イメージに近い形のスライダーです。
これだ、というデモがあれば「Core」と書かれているリンクを開きます。
CodeSandboxというWebエディターが開きます。
左側のファイル一覧からindex.htmlを開いてください。
右側にあるプレビュー表示に必要なコードが、1ファイル内に全て書かれています。
ファイル最下部あたりにある、<script>タグの記述を見てみてください。
パラメータ部分で、赤線で囲った上2行をコピーします。
- slidesPerView：一度に表示するスライドの数
- spaceBetween：スライド同時の間隔
コピーしたら、制作中のhtmlファイルにあるSwiperの記述に追加します。
縦スライドにするdirection: 'vertical'は使いませんので、削除もしくはコメントアウトしてください。
advance-thumbs.html
これで、1度に3枚のスライドを表示する設定になりました。
3枚以上スライドがないと動かないので、<div class="swiper-slide"> </div>を増やします。
advance-thumbs.html
ブラウザで表示を確認してみましょう。 スライド3つ分が表示されていれば、うまくできています。
【補足】
今回はベースのデザインがあるので、必要部分のコードだけをコピー・アンド・ペーストしました。
「スライダーが動かない」なんて場合は、空のHTMLファイルを用意し、デモのindex.htmlに書かれているコードを全て貼り付けて確認するのがオススメ。それでスライダーが動作したら、制作中のファイルと見比べて、問題点を探します。
2. スライダーの移動と中身の変更
スライダーの最低限の用意ができたので、表示させたい位置に移動しましょう。
カットアンドペーストで、div.swiperをPORTFOLIOセクションの見出下に移動。
advance-thumbs.html
それぞれ<div class="swiper-slide"> </div>の中に、カードデザイン部分を入れていきます。
<div class="card shadow h-100">をカットアンドペーストしていってください。
advance-thumbs.html
6つのカードを、全て移動してください。
元々使っていた.rowや.col-md-4のdivタグは削除します。
コメント部分は削除したり、ご自身の分かりやすい形に書き換えるなどして整理してください。
advance-thumbs.html
<section id="work" class="container pt-5">
<div class="text-center mt4rem mb-5 pb-4">
<h2 class="big-h2">PORTFOLIO</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<div class="line-mf"></div>
</div>
<!-- Slider main container -->
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="card shadow h-100">
<img src="img/work-1.jpg" alt="" class="img-fluid">
<div class="card-body row align-items-end">
<div class="col-sm-9">
<h3 class="w-title">Lorem impsum dolor</h3>
<div class="w-more">
<span class="w-blue">Web Design</span> / 18 Sep. 2018
</div>
</div>
<div class="col-sm-3 text-right w-blue">
<i class="fas fa-2x fa-plus-circle"></i>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow h-100">
<img src="img/work-2.jpg" alt="" class="img-fluid">
<div class="card-body row align-items-end">
<div class="col-sm-9">
<h3 class="w-title">Loreda Cuno Nere</h3>
<div class="w-more">
<span class="w-blue">Web Design</span> / 18 Sep. 2018
</div>
</div>
<div class="col-sm-3 text-right w-blue">
<i class="fas fa-2x fa-plus-circle"></i>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow h-100">
<img src="img/work-3.jpg" alt="" class="img-fluid">
<div class="card-body row align-items-end">
<div class="col-sm-9">
<h3 class="w-title">Mavrito Lana Dere</h3>
<div class="w-more">
<span class="w-blue">Web Design</span> / 18 Sep. 2018
</div>
</div>
<div class="col-sm-3 text-right w-blue">
<i class="fas fa-2x fa-plus-circle"></i>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow h-100">
<img src="img/work-4.jpg" alt="" class="img-fluid">
<div class="card-body row align-items-end">
<div class="col-sm-9">
<h3 class="w-title">Bindo Laro Cado</h3>
<div class="w-more">
<span class="w-blue">Web Design</span> / 18 Sep. 2018
</div>
</div>
<div class="col-sm-3 text-right w-blue">
<i class="fas fa-2x fa-plus-circle"></i>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow h-100">
<img src="img/work-5.jpg" alt="" class="img-fluid">
<div class="card-body row align-items-end">
<div class="col-sm-9">
<h3 class="w-title">Studio Lena Mado</h3>
<div class="w-more">
<span class="w-blue">Web Design</span> / 18 Sep. 2018
</div>
</div>
<div class="col-sm-3 text-right w-blue">
<i class="fas fa-2x fa-plus-circle"></i>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow h-100">
<img src="img/work-6.jpg" alt="" class="img-fluid">
<div class="card-body row align-items-end">
<div class="col-sm-9">
<h3 class="w-title">Studio Big Bang</h3>
<div class="w-more">
<span class="w-blue">Web Design</span> / 18 Sep. 2018
</div>
</div>
<div class="col-sm-3 text-right w-blue">
<i class="fas fa-2x fa-plus-circle"></i>
</div>
</div>
</div>
</div>
</div>
<!-- pagination -->
<div class="swiper-pagination"></div>
<!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>
スライダーとして動作していればOK。 次のステップで、見た目を整えていきましょう。
3. 見た目を整える
スライダーの見た目を、デザインに沿うように変更します。
ページネーションの位置
検証ツールで確認すると、ページネーションはpositionプロパティで、スライドと重なるように設定されていることがわかります。
絶対配置の基準位置になっている要素は div.swiper。
今回は簡単に、 .swiperの要素下部に余白を作る形で調整しましょう。
合わせて、前回のレッスンで貼り付けた.swiperへのサイズ指定は削除します。
advance-thumbs.css
.swiper{
padding-bottom: 4rem;
}
両端の“ぼかし”と表示スライド数
次に、スライドの両端にぼかしを入れたような見た目を作ります。 mask-imageというCSSプロパティを使うと、簡単に作れます。
advance-thumbs.css
.swiper{
mask-image: linear-gradient(
to right,
transparent 0 5%,
#000 8% 92%,
transparent 95% 100%
);
padding-bottom: 4rem;
}
数値で書くので難しく感じますが、Photoshopなどのグラデーションマスクと同じイメージです。
https://developer.mozilla.org/ja/docs/Web/CSS/mask-image
一度に表示するスライドの数は、scriptタグ内、slidesPerViewで設定していましたね。
パラメータ値は小数点以下も指定できます。 小数点以下の数値を入れると、左右に少しずつカードが見えるようになります。
advance-thumbs.html
<script>
const swiper = new Swiper('.swiper', {
slidesPerView: 3.6,
spaceBetween: 30,
loop: true,
ナビゲーションボタンの位置
mask-imageプロパティの影響で、前後スライドを切り替えるボタン（.swiper-button-next と .swiper-button-prev）も見えなくなっています。
mask-imageの影響を受けないように、div.swiperの外に出しましょう。
とは言え、前後ボタンもページネーションと同じく、絶対配置。 新しい基準位置を作るために、スライダー全体を囲うdivタグを1つ追加します。
ボタンの表示は戻りましたが、位置が縦方向中央からズレてます。
位置指定を上書きして、直しましょう。 絶対配置で親要素（基準位置）の縦方向中央に置きたい時は、以下のように書きます。
advance-thumbs.css
.swiper-button-next,
.swiper-button-prev{
top: 50%;
transform: translateY(-50%);
}
ページネーション、ナビゲーションの色を変える
それぞれの要素の色を変えます。
検証ツールでCSSのセレクタを探し、上書きしてしまえばOK。 colorかbackground-colorかだけ間違えなければ問題ないでしょう。
advance-thumbs.css
.swiper-button-next::after,
.swiper-button-prev::after{
color: #4e4e4e;
}
.swiper-pagination-bullet-active {
background-color: #ffc107;
}
カード高さ・余白調整
最後に微調整。
表示幅・タイトルの文字数によって、カードの高さが揃わずガタつくので直します。
方法は、swiper-slideクラスのheightをautoにするだけ。 Bootstrapを使っていますので、h-autoクラスを追加するだけで良いです。
advance-thumbs.html
<div class="position-relative">
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide h-auto">
...
6つあるdiv.swiper-slideすべてにh-autoクラスを追加すると、高さが揃います。
4. スライド位置の設定
SwiperのオプションcenteredSlidesを使って、ページネーションとスライドの関係をわかりやすくしましょう。
centeredSlides: true,の指定で、アクティブなスライドを中央に配置出来ます。 特に、表示スライド数を小数点以下で指定する場合は、設定しておいたほうが綺麗に見えます。
左右にどのくらいカードを見せるか、小数点以下の調整と合わせて設定してください。
advance-thumbs.html
const swiper = new Swiper('.swiper', {
slidesPerView: 3.7,
spaceBetween: 30,
loop: true,
centeredSlides: true, //アクティブなスライドを中央に配置
...
ちなみに、Demosでは『Centered』でこのパラメータが使われています。 便利なのですが、説明がないので、自分で作りながらでないと必要性がわかりにくいですね。
https://swiperjs.com/demos#centered
5. 自動再生の設定
スライダーは動作するものの、ユーザーがアクションをしてくれない限り停止しています。 何もしなくても、自動的に動くように設定します。
Swiper Demosにある『Autoplay』のコードを見てみましょう。
scriptタグの中、下図赤線で囲ったautoplayが自動再生の設定です。
delayはスライドを表示している（切替えるまでの）秒数です。想像できた方も多いのではないでしょうか。
その下にあるdisableOnInteractionは、何か想像しにくいですね。 Swiper APIで調べてみしょう。
https://swiperjs.com/demos#autoplay
falseを指定すると、ユーザーが操作 (スワイプ) した後も自動再生が無効化されないと書かれています。 そのまま貼り付けて良さそうですね。
autoplayの設定部分を、作成中のHTMLファイルに追加します。 delayの値はお好みに合わせて増減してみてください。
advance-thumbs.html
<script>
const swiper = new Swiper('.swiper', {
slidesPerView: 3.6,
spaceBetween: 30,
loop: true,
centeredSlides: true,
autoplay: { //自動再生の設定
delay: 2500,
disableOnInteraction: false,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
ブラウザでページを再読込して、自動でスライダーが動くか確認してください。
レスポンシブな設定
スマホのように表示幅が狭い時は一度に見えるスライド要素の数を少なく、PCモニターなど広いときは多くしたい。 …と、表示領域に合わせた設定を行いたい場面もあります。 こうしたレスポンシブな設定には、breakpointsのパラメータを使います。
Swiper Demosだと『Responsive breakpoints』がレスポンシブ対応のスライダー見本です。
Swiper APIでは、Parameters一覧の中にあるbreakpointsで設定方法を確認できます。
breakpointsは、CSSメディアクエリ@media(min-width: 〇〇px)と同じ役割です。
例えば320: { } の中に書いた指示は、表示領域が幅320px以上なら適用されます。
モバイルファーストでCSSを書くイメージですので、breakpoints { }で囲われていない部分は最小幅での指定を書くと良いですね。
advance-thumbs.html
<script>
const swiper = new Swiper('.swiper', {
slidesPerView: 1.4,
spaceBetween: 20,
loop: true,
centeredSlides: true,
// Responsive breakpoints
breakpoints: {
640: { // 画面幅640px以上のとき
slidesPerView: 2.2,
spaceBetween: 30,
},
1200: { // 画面幅1200px以上のとき
slidesPerView: 3.7,
},
},
//自動再生の設定
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
実習
このレッスンページ上部にある『目標』のデザインのスライダーを実装してください。
レッスンと一緒にコードを書かれていた方は、完成済なのでそのままでOK。 気になるところがあれば調整してみてください。
本レッスンで作成したファイルはレッスン素材にアップロードしています。 CSSファイルは「css」フォルダに遺贈させてから、ご確認ください。
補足
今回使用したスライダー以外に、Swiperは幅広いデザインのスライダーに対応しています。
例えば、メデイアサイトやショッピングサイトでよく見かける、サムネイル付きのスライダー。 これも『Thumbs gallery』のコードを使って、CSSを調整すると作れそうです。
https://swiperjs.com/demos#thumbs-gallery
Effect 〇〇系はスライドの動きが個性的。 使い所が難しいですが、うまく使うとページのアクセントにもなるでしょう。
https://swiperjs.com/demos#effect-coverflow
使ってみたいデザインに合わせて、Demosでコードを参照し、カスタマイズして活用してください。
お疲れ様でした！