jQuery不要の高機能スライダー 「Swiper」を実装してみました
今日は、ページ内の要素丸ごとスライド可能な高機能スライダー、「Swiper」をご紹介いたします。
Swiperのダウンロードはこちらから可能です。
Swiperの使用に至ったキッカケ
見出しやボタン等の要素丸ごとスライドするのに最適なスライダーを探していて、Swiperに辿り着きました。
Div要素ごとのスライドは、bxSliderで可能という情報が多くあったため、最初は私自身にとって使い慣れたbxSliderで対応しようとしました。
しかし、実際試してみるとなぜか上手く動作しない…
そこでbxSliderに替わる高機能スライダーとして発見したのが、この「Swiper」でした。
Swiperの特徴、利点としては、以下の通りです。
Swiperの良いところ
※オプションのパラメータ設定については、こちらのページにて詳細が確認できます。
また、実際の動作については、公式サイトのこちらのページにて確認できます。
デモをご覧いただくと、非常に多様な表現が可能であることがお分かりいただけると思います。
ご参考までに、
以下、Bootstrapのテンプレートを使用して作成した私自身のデモページです。
Demo
※今回上記Demoで使用しているBootstrapテンプレートは以下となります。
startbootstrap.com
では、次に、Swiperの基本的な使い方についてです。
Swiperの基本的な使い方
[手順]
1. 公式サイトから、ファイル一式をダウンロード
2. swiper.js、swiper.cssを配置
3. htmlファイルに下記ソース要領でコンテンツ部分を記述
4. htmlファイルに下記ソース要領でjavascriptコードを追記
1. 公式サイトから、ファイル一式をダウンロード
Swiperのダウンロードはこちらからどうぞ
2. swiper.js、swiper.cssを配置
以下headタグ内に記述(ファイルの場所は適宜変更ください)
<link rel="stylesheet" href="swiper.min.css"> <script src="swiper.min.js"></script>
3. htmlファイルに下記ソース要領でコンテンツ部分を記述
《html》
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">スライド(1)のコンテンツを挿入</div> <div class="swiper-slide">スライド(2)のコンテンツを挿入</div> <div class="swiper-slide">スライド(3)のコンテンツを挿入</div> </div> </div>
4. htmlファイルに下記ソース要領でjavascriptコードを追記
以下bodyタグ終了直前に記述
《javascript》
var swiper; $(window).load(function() { swiper = new Swiper('.swiper-container', { // ここにオプションを記述 }); });
実装のための手順としては以上となります。
本日は、簡単、便利、高機能スライダー、「Swiper」のご紹介でした。
サイトにスライダーを実装したいと思われる際には、
ぜひお試しあれ。
【参考記事】
on-ze.com
swiper.js使ってみたからそのオプションについて – なんかいろいろデザインする人 :
http://reiwinn-web.net/2016/11/30/swiper-js-01/
jQuery無しで動く!「swiper」がとても便利 | ホームページ制作 大阪|株式会社I.M.D :
https://www.imd-net.com/blog/2016/05/31-235955/