“jCarouselLite”-1

“Carousel”とはシンプルなサムネイルギャラリーをスライドとして表示するスクリプトです。

JavaScript

スクリプトを動作させるには、index-#.htmlに以下のHTMLコードが含まれています:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jcarousellite.js" type="text/javascript"></script>

基本的な値を使用してスクリプト機能を初期化する以下のコードも<head></head>内にを含まれています:

$(function(){
  $(".carousel").jCarousellite({
    btnNext: ".next",
    btnPrev: ".prev"
  });
});

ここで、スクリプトは以下の属性を備えた.carouselクラスを初期化します:
• btnNext: “.next” – 「Next」ボタンを.nextクラスを備えた要素として定義します;
• btnPrev: “.prev” – 「Prev」ボタンを.prevクラスを備えた要素として定義します;

HTML

HTMLコードは以下のように記述します:

<div class="carousel-box">
  <div class="inner">
    <button class="prev"></button>
    <button class="next"></button>
    <div class="carousel">
      <ul>
        <li><a href="index-1.html"><img src="images/thumb1.jpg" alt="" width="177" height="130" /></a></li>
        <li><a href="index-1.html"><img src="images/thumb2.jpg" alt="" width="177" height="130" /></a></li>
        <li><a href="index-1.html"><img src="images/thumb3.jpg" alt="" width="177" height="130" /></a></li>
      </ul>
    </div>
  </div>
</div>

各イメージに対する正確な高さの値を指定してください。
また、イメージを加えるには以下の構文をコピーしてください:

<li><a href="index-1.html"><img src="images/thumb3.jpg" alt="" width="177" height="130" /></a></li>

CSS

他のスクリプトと異なり、CSSを手動で修正する必要はありません。
CSSはすべて、JavaScriptによって動的に作成されるでしょう。


Comments are closed.