ブログや普通のサイトでもスライドショーのような動きがあるといいよね。ワードプレスのプラグインでも似たようなのあるけど、プラグインの多様はサイトがおもくなるし、ショートコードの設置方法が主なので設置場所に自由が利かないのも困ってて・・・
プラグインを使わなくとも複雑でないJSで実装できるよ。この方法ならプラグインに頼らずカスタマイズや設置場所も自由が利くので便利だよ。
Swiper.jsによるスライダー作成方法
Swiper.jsというjQueryを利用したスライドショーの作成方法になります。
設定次第で複数枚表示させるスライダーや、動き方も様々なアクションを付けることが可能です。
まずはCDNにて以下のcssとjsを読み込ませます。
（ワードプレスであればheader.phpに記述です）
※CDNとは必要なJSやcssを外部のサーバから読み込んでくる手法になります。
▼cssは＜/head＞の手前に
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> |
▼jsは＜body＞直下に記述します。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> |
次に設置したい箇所に＜div＞で以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Swiper START --> <div class="swiper-container"> <!-- メイン表示部分 --> <div class="swiper-wrapper"> <!-- スライド１ --> <div class="swiper-slide"><img src="スライド①" /></div> <div class="swiper-slide"><img src="スライド②" /></div> <div class="swiper-slide"><img src="スライド③" /></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- Swiper END --> |
Slide ① Slide ③ Slide ③となっている個所は、スライドさせたい画像のパスを書いてください。
ここでは3枚ですが、それ以上でも可能です。
上記の＜div＞コードを記述した後、その下にスライダーを発動させるJSコードを記述します。
以下の通りです。
|
1 2 3 4 5 6 7 8 9 |
<script> var mySwiper = new Swiper ('.swiper-container', { effect: "slide", loop: true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', }) </script> |
▼以下にデモを作成しておきました。
アニメーションの自動再生
スライドショーのアニメーションを自動再生させたい場合、はJS発動スクリプトに以下を追記してください。
|
1 |
autoplay : "2000", |
上記の2000は秒間隔の指示命令文で2000では2秒間隔でスライドするということになります。お好みで設定してください。
自動再生させた場合、スライドショー左右に表示されている横三角のボタンが必要なくなります。その際はhtmlの以下の2行を削除してください。
|
1 2 |
<div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> |
アニメーションエフェクトの種類
このスライドショーはJSコードの『 effect: “slide”』の部分を書き換えることで、様々なアニメーションエフェクトかけることができます。
エフェクトの種類は全5種類となっており、以下それぞれサンプルページにて、実装方法を解説しておりますので、参考にしてください。
カルセルスライダー作成
Swiper.js便利でアニメーションも豊富でいいね。
最近よく見る画像が横にいっぱい並んでスライドする仕様はないのかな？
最近よく見る画像が横にいっぱい並んでスライドする仕様はないのかな？
カルセルスライダーだね。以下のページから実装方法を紹介するよ
