-
【Swiper】を使い、慣性スライドをコピペで実装 完全初心者向け
Listen & Subscribe
スライダーの動作や挙動は様々ですが、止まらずに左右どちらでもスースーいくやつ。
意外にこの動きを実装してくれるプラグインってないんですよね。
slick sliderみたいに、画像など、コンテンツごとにピタッと止まる仕様もいいですが、止まらずそのままスーっ、、指をおけばピタッ、、最後の画像でトン、、
例えばスマホのYoutubeアプリで見たショートやトップニュースがそれに当たります。（2023/1月現在）
そんな動作も、高級感があっていいですよね。
そこでこの記事でご紹介したいスライダーのプラグインが、上記のような完成スクロールを実装してくれるSwiperになります。
公式サイトは下記になります。
目次
完成DEMOコード
下記コードをコピーすれば、まずは基本的な動作が確認できます。
<!DOCTYPE html> <html> <head> <title>SWIPER</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> </head> <style media="screen"> body{ margin: 0; } .swiper-slide img{ width: 100%; } </style> <body> <div class="swiper01"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script type="text/javascript"> 'use strict'; var mySwiper = new Swiper ('.swiper01', { freeMode:true }); </script>こちらで動きます。
jQueryを読み込まずして動くのも一つの特徴です。
これをベースに、下記サイトを参考に様々なオプションをお試しください。
CDNではなく直接必要ファイルをダウンロードし、読み込む方法など、個人的にすごく参考になったサイトをいくつか貼っておきます。
スポンサーリンク
導入方法とデザインの調整
動きをわかりやすくするためにCSSのコードを用意してくれていたり、色んなパターンのオプションのコードをCODEPENで載せてくれているのでとても参考になります。
ページネーションやボタン、ギャラリー表示のデザインを調整してるCSSコードも詳細に記載してくれています。
適宜変更してみてオリジナリティを出しましょう。
オプション一覧
若干上級者向けですが、オプションの一覧を見ることでより深くswiperの操作方法を知ることができます。
上記ページ各オプションのDEMO
上記参考ページの動作や挙動をプレビューできるDEMOサイトです。
気に入った挙動のコードをコピペすればOKです。
初心者向けSWIPERの概要
導入するメリットやデメリット、カスタマイズ方法など、初心者にもわかりやすく説明してくれています。
freemodeで慣性スライド
swiperに用意されたオプションの一つで、デフォルトでは無効化（false）されています。
freemode:true とすると、スワイプした時、コンテンツごとに止まらず、そのまま横にスーッと流れる挙動が表現されます。
この動きを簡単に実装できるプラグインはswiperくらいかなと思います。
おまけ
最後に、スマホ版で見たときだけ、swiperを動かすコードを貼り付けておきます。
実際に僕が実装したセクションは下記になります。
パソコンで見た際はただの横並びになっていますので、デバックスールなどで確認してみてください。
完成DEMOコード
<!DOCTYPE html> <html> <head> <title>SWIPER</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> </head> <style media="screen"> body{ margin: 0; } .swiper-slide img{ width: 100%; } </style> <body> <div class="swiper02"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> <div class="swiper-slide"> <img src="img/swiper01.jpg" alt=""> </div> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script type="text/javascript"> 'use strict'; function sliderSetting(){ var width = $(window).width(); if(width <= 767){ var mySwiper02 = new Swiper ('.swiper02', { freeMode:true }); } } sliderSetting(); $(window).resize( function() { sliderSetting(); }); </script>こちらでスマホのみ動きます。
まとめ
いかがでしたでしょうか？
この記事では、慣性スライドを実装できるスライダープラグインのswiperについて、参考ページなどご紹介しながら簡単に解説しました。
クライアント様によって様々な要望がある中で、このようなプラグインを使えると非常に便利です。
