More than 5 years have passed since last update.

jQueryのプラグインでスライドショーを実装する

Last updated at 2019-01-31Posted at 2019-01-29

#目的：jQueryでスライドショーを実装する
bxsliderというプラグインを使用してサイトにスライドショーを実装する．
とっても便利！
[https://bxslider.com/]

#手順１：bxsliderを使用するためのファイルをサーバ上から<head>内に読み込む

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>

#手順２：スライドショーしたい画像をhtmlに<ul>タグとして記述

クラス名は任意につけて良いが今回はbxsliderとする．

<ul class="bxslider">
  <li><img src="../images/sample-01.png" alt="" width="640" height="300"></li>
  <li><img src="../images/sample-02.png" alt="" width="640" height="300"></li>
  <li><img src="../images/sample-03.png" alt="" width="640" height="300"></li>
  <li><img src="../images/sample-04.png" alt="" width="640" height="300"></li>
</ul>

#手順３：<script>内またはjsファイルにjQueryのコードを記述する
<ul>タグのクラス名をセレクタに書き込む．
スライドショーのオプションは必要に応じて書き込む．

$('.bxslider').bxSlider({
　　auto: true,　　　　＃自動再生ON
　　slideWidth: 640,　　＃スライドの大きさを640pxにする
　　minSlides: 3,　　　＃表示されるスライドの最小枚数は１枚
　　maxSlides: 3　　　＃表示されるスライドの最大枚数は１枚
});

完成('◇')ゞ

#スライドショーのオプションは以下を参考にすると良い．

autoplay #自動再生
autoplaySpeed #自動再生の間隔
arrows #左右のナヴィゲーションの矢印を表示
dots #サムネイルのドットを表示
draggable #ドラッグによるコントロール
fade #スライダーの要素をフェードイン・フェードアウトで切り替え
easing #easingの種類を指定可能
infinite #ループさせるか否か
pauseOnHover #マウスオーバーで自動再生を一時停止
pauseOnDotsHover #ドットにマウスオーバーで一時停止
responsive 3レスポンシヴの設定

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up