超簡単設置！レスポンシブ対応スライダー Swiperの設置方法
レスポンシブウェブデザインに対応しているスライダー、Swiper（3.4.1バージョン）の設置方法をご紹介します。
他で使っているjQueryなどと競合しないので、安定して使いやすいスライダーです。
・１画像づつの切り替え
・画像サイズは同じ
・オートプレイ
・ナビゲーションドットを表示する（色変更する）
場合のご紹介です。
CSSの設置
CSSとjsファイルの両方とも、CDN での設置方法なので以下の行を記述するだけです。（CDNサイトへリンクして必要なファイルを読み込む形）
<head>~</head>内へ記述し、CSSを読み込みます。自サイトのスタイルシートの前に記述する事で、後ほどドットのカラーなどを変更できます。
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> |
jsの設置
次にHTMLのBodyの締めタグ</body>の直前にjsファイルの読み込みとjsのコードを設置します。
jsコード内では、オプションが設定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script> <script> //initialize swiper when document ready var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'horizontal', loop: true, autoplay: 2000, speed: 2000, effect: 'fade', // If we need pagination pagination: '.swiper-pagination', }); </script> |
オプションの説明
direction :画像の設置、切り替え方向。horizontalは水平に切り替わる事を意味しています。
loop:最後画像まで行くと、最初の画像が引き続き出てくる
autoplay: 自動でずっと動き続けるモード。画像が静止して表示される秒数。1000が１秒。
speed:１つ１つの画像が切り替わる速度。数字で指定。
effect: 画像の切り替え方法。fadeは消えて次の物が出る。他にslide:右から左にスライド、cube:四角の箱が回る感じ、coverflow:切り替わる際、前後画像が斜めに。flip:画像が裏返しに切り替わる。などがある。
pagination:画像下部に表示させるページネーション（この場合ドット）を囲むHTMLのセレクタ名を指定。
スライド画像の指定
スライダーを設置したいHTMLの場所に下記のように設置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><img src="1枚目の画像URL" /></div> <div class="swiper-slide"><img src="2枚目の画像URL" /></div> <div class="swiper-slide"><img src="3枚目の画像URL" /></div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div> |
最後のswiper-paginationはナビゲーションを設置する場合。要らなければこの行は削除。
ここまでの設置でスライダーは動きます。
さらに、左右に「＜ ＞」の形の前へ、次へのナビゲーションを出す場合、スクロールバーを出す場合などは
swiper-paginationの行の下に下記を追加すればOK
|
1 2 3 4 5 6 |
<!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <!-- 前への ＜ --> <div class="swiper-button-next"></div> <!-- 次への ＞ --> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> <!-- 下部にスクロールバーを出したい場合 --> |
このスライダーは、全体を囲う .swiper-container に幅や高さを指定しないと設置している画像の大きさでレスポンシブ対応となります。幅は100%が指定されている場合と同じ動作となります。
ドット色変更
今回は、ナビゲーションのアクティブなドットのデフォルト色が青なため、白にするべくCSSで上書きしました。アクティブでないドットは薄い灰色な感じです。アクティブでないドットは
.swiper-pagination-bullet で同じように設定されています。
|
1 2 3 |
.swiper-pagination-bullet-active { background: #fff; } |
簡単に実装できて、便利ですね！新しいバージョンで実装するには、CDNの読み込み部分のバージョンを変更してください。（2017.01時点の最新です）
TAG: