名古屋の専門学校でWebの勉強をしている学生です。将来はフロントエンドエンジニアを目指しています。

jQueryライブラリを使った簡単なスライドショー

今回はjQuery lightSliderという「軽さ」が特徴的なカルーセルプラグインを使って簡単なスライドショーを作ってみたので、lightSliderの使い方と、lightSliderで使えるオプションをまとめました。

目次

  1. jQuery lightSliderのダウンロード
  2. jQuery lightSliderの読み込み
  3. jQuery lightSliderのHTMLの記述
  4. jQuery lightSliderの呼び出し
  5. jQuery lightSliderのオプション
  6. 自分で作ってみた簡単なスライドショー
  7. まとめ

jQuery lightSliderのダウンロード

jQuery lightSlider公式ページ

上記のサイトへ移動して、右上にあるDownloadボタンを押すと、自動的にダウンロードが始まるので、待ちます。


ダウンロードが終わると、フォルダの中に「src」というフォルダがあります。その中にある「css」「img」「js」のフォルダを使っていきます。

jQuery lightSliderの読み込み

次にファイルの読み込みをしていきます。

lightSliderと別でjQueryも必要なので忘れずに読み込んでください。

パスは自分の環境と合わせましょう。

ファイルの読み込み


// head要素内
<link rel="stylesheet" href="src/css/lightslider.css" />
// body要素の閉じタグの前
<script src="js/jquery-3.2.1.min.js"></script> 
<script src="src/js/lightslider.js"></script>

jQuery lightSliderのHTMLの記述

HTMLの書き方です。ulとliを使います。ulの中にid属性を指定して、名前はなんでもいいですが、後ほどsliderを呼び出す際に使います。

data属性を使って、サムネイル画像の指定をします。li要素の中で指定します。「images」フォルダの中に「thumb」フォルダを作ってその中にサムネイルにしたい画像を入れて、指定します。

HTMLの記述


<ul id="lightSlider">
      </li>
      <li data-thumb="images/thumbs/1.jpg">     
        <img src="images/1.jpg"/>
      </li>
        <li data-thumb="images/thumbs/2.jpg">
        <img src="images/2.jpg"/>
      </li>
      ・・・
</ul>

jQuery lightSliderの呼び出し

ついにlightSliderのイニシャライズ(呼び出し)をします。とは言っても、一番シンプルなのはたったこれだけでできます。

sliderの呼び出し


<script>
  $(function(){
    $('#lightSlider').lightSlider();
  });
</script>

jQuery lightSliderのオプション

公式ページに書かれているオプションを翻訳してまとめました。

名前 デフォルト 説明
item 3 一度に表示するスライドの数
autoWidth false 各スライドのカスタム幅
slideMove 1 一度に移動するスライド数
slideMargin 10 各スライド間の間隔
addClass スライダーのカスタムクラスを追加し、異なるスライダーに異なるスタイルを設定することができます
mode ‘slide’ スライドかフェードで切り替える
useCSS true trueの場合、LightSliderはCSSトランジションを使用します。 fall jquery animationが使用される場合
cssEasing ‘ease’ CSSのアニメーションに使用されるイージングのタイプ
easing ‘linear’ jqueryアニメーションに使用されるイージングのタイプ
speed 400 遷移時間(ミリ秒)。 // ex =スピード:400;
auto false trueの場合、スライダーは自動的に再生を開始します。
pauseOnHover false ホバーで自動再生を一時停止する。
loop false falseの場合は、最後の要素のときにスライドの先頭にループバックする機能が無効になります。
slideEndAnimation true slideEndアニメーションを有効にする
pause 2000 各自動トランジション間の時間(ms単位)
keyPress false キーボードナビゲーションを有効にする
controls true falseの場合、前/次のボタンは表示されません。
prevHtml prev制御用のカスタムhtml
nextHtml 次の制御のためのカスタムhtml
rtl false 方向を右から左に変更する
adaptiveHeight false 各スライドの高さに基づいてスライダの高さを動的に調整する
vertical false スライドの方向を水平から垂直に変更する
verticalHeight 500 垂直モードがアクティブでアイテムが1より大きい場合はスライダの高さを設定する
vThumbWidth 100 垂直モードをアクティブにしているときのギャラリーのサムネイルの幅
thumbItem 10 一度に表示するギャラリーサムネイルの数
pager true ページオプションを有効にする
gallery true サムネイルギャラリーを有効にする
galleryMargin 5 ギャラリーとスライドの間隔
thumbMargin 3 各サムネイルのギャラリーとスライドの間隔
currentPagerPosition ‘middle’ サムネイルの位置。 ‘左’、 ‘中央’、 ‘右’
enableTouch true タッチサポートを有効にする
enableDrag true デスクトップマウスのドラッグサポートを有効にする
freeMove true スワイプまたはドラッグ中の自由移動(無制限)を有効にする
responsive null ブレークポイントごとにswipSeparate設定を自由に動かせるようにする(制限なし)またはドラッグする

自分で作ってみた簡単なスライドショー

自作の簡単なスライドショー
jQuery


<script>
  $(function(){
      $('#lightSlider').lightSlider({
        item:1,
        auto: true,
        speed: 500,1
        pause: 4000,
        gallery:true,
        thumbItem:6,
        loop: true,
        adaptiveHeight:true,
      });
  });
</script>

まとめ

今回、jQuery lightSliderというプラグインを使ってみた結果、本当に楽に作ることができて、使いやすいと思いました。さらに、オプションの幅も広く、カスタマイズがたくさんできて素晴らしいと思いました。ですが、いつまでもプラグインに頼っていてはいけないと思うので、いつか自分でJavaScriptを使って1からスライドショーを作りたいです!

コメント

コメントをする