My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

おススメ Div要素 丸ごと スライド可能なスライダー 「Swiper」

f:id:sntkk3:20171008223105p:plain

jQuery不要の高機能スライダー 「Swiper」を実装してみました

今日は、ページ内の要素丸ごとスライド可能な高機能スライダー、「Swiper」をご紹介いたします。

Swiperのダウンロードはこちらから可能です。

Swiperの使用に至ったキッカケ

見出しやボタン等の要素丸ごとスライドするのに最適なスライダーを探していて、Swiperに辿り着きました。

Div要素ごとのスライドは、bxSliderで可能という情報が多くあったため、最初は私自身にとって使い慣れたbxSliderで対応しようとしました。

しかし、実際試してみるとなぜか上手く動作しない…
そこでbxSliderに替わる高機能スライダーとして発見したのが、この「Swiper」でした。


Swiperの特徴、利点としては、以下の通りです。

Swiperの良いところ

  • 通常スライダーに必須であることが多いjQueryが不要
  • 実装が簡単(追加ファイルはswiper.js、swiper.cssのみでOK)
  • Div要素丸ごとのスライドが可能
  • オプションが豊富 (※)

※オプションのパラメータ設定については、こちらのページにて詳細が確認できます。

また、実際の動作については、公式サイトのこちらのページにて確認できます。
デモをご覧いただくと、非常に多様な表現が可能であることがお分かりいただけると思います。

ご参考までに、
以下、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/