2013.06.17
javascript

スライドショー 超軽量jQueryプラグイン

タブの表示切り替えについてこちらで紹介したプラグイン、Tiny Carouselの写真のスライドショーでの使い方です。

このプラグインはとても軽いのでおススメです。
そして設定も簡単、CSSでアレンジ自由自在です。
ダウンロードはこちらから。

jquery009

スライドショー 超軽量 jQueryプラグイン

今回はサンプルで使用したソースを紹介します。

jQueryソース

$(function(){
   $('#slider').tinycarousel({ 
    pager: true, 
    interval: true, 
    controls: false  
  });	
});

このプラグインで用意されているオプションとデフォルトの値は下記リストです。

  • start: 1 … どの画像からスタート?
  • display: 1 … 一度に表示する画像はいくつ?
  • axis: ‘x’ … 左右?上下?どちらにスクロールするか。’x’は左右 ‘y’は上下 .
  • controls: true … 左右にナビボタンを付ける?
  • pager: false … ページ番号を表示する?
  • interval: false … 次の画像へ切り替える?
  • intervaltime: 3000 … 次の画像へ切り替えるまでのミリ秒間
  • animation: true … アニメーションする?
  • duration: 1000 … アニメーションの速さのミリ秒
  • callback: null … コールバック

今回は、上記のオプションからデフォルトではfalseになっているpagerとintervaltrueで使用し、デフォルトでtruecontrolsfalseで使用するため、ソースに記述してあります。もちろんデフォルトのまま使用する場合は記述する必要ありません。

HTMLソース

1.まずはhead内に下記を記述してjQueryとプラグインを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>

2.そして以下がソースです。

<div id="slider">
   <div class="viewport">
      <ul class="overview">
         <li><img src="images/001.jpg" width="450" /></li>
         <li><img src="images/002.jpg" width="450" /></li>
         <li><img src="images/003.jpg" width="450"/></li>
         <li><img src="images/004.jpg" width="450"/></li>
         <li><img src="images/005.jpg" width="450"/></li>
         <li><img src="images/006.jpg" width="450"/></li>                            
      </ul>
   </div>
                        
   <ul class="pager">
      <li><a rel="0" href="#" class="pagenum active">1</a></li>
      <li><a rel="1" href="#" class="pagenum">2</a></li>
      <li><a rel="2" href="#" class="pagenum">3</a></li>
      <li><a rel="3" href="#" class="pagenum">4</a></li>
      <li><a rel="4" href="#" class="pagenum">5</a></li>
      <li><a rel="5" href="#" class="pagenum">6</a></li>
   </ul>
</div>
HTMLの説明
  • 2行目~11行目
  • スライドショー本体部分です。
    クラス名、viewport、overviewはプラグインと連携しているので変更せずにそのまま使用します。
    li部分に画像のリンクを記述。

  • 13行目~20行目
  • ページ番号の部分です。
    一番始めから順番にrel=”0″、rel=”1″と記述します。記述しないと動きませんので注意!
    また、クラス名のpager、pagenum、activeはプラグインと連携しているので変更せずにそのまま使用します。

CSSソース

ul{
  margin:0;
  padding:0;
}
#slider { 
  height: 1%; 
  overflow:hidden; 
  padding: 0 0 10px 0; 
}
.viewport { 
  width: 455px; 
  height: 305px; 
  float: left; 
  overflow: hidden; 
  position: relative; 
}
.pager { 
  overflow:hidden; 
  list-style: none; 
  clear: both; margin: 0; 
}
.pager li { float: left; }
.pager a { 
  background-color: #fff; 
  text-decoration: none; 
  text-align: center; 
  padding: 5px; 
  color: #555555; 
  font-size: 14px; 
  font-weight: bold; 
  display: block; 
}
.pager .active { 
  color: #fff; 
  background-color:  #555555; 
}
.disable { visibility: hidden; }
.overview { 
  list-style: none; 
  position: absolute; 
  width: 250px; 
  left: 0; 
  top: 0; 
}
.overview li{ 
  float: left; 
  margin: 0 20px 0 0; 
  padding: 1px; 
  height: 300px; 
  border: 1px solid #dcdcdc; 
  width: 450px;
} 
CSSの説明

上記で使われている全てのクラス名(.viewportなど)はこのプラグインでは必須ですので変更せずに、widthなどのプロパティやそれらの値でデザインを調整してください。
独自のクラス名を追加する分にはOKです。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP