スライドショー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのslideshow()プラグインを利用してスライドショーを表示します。サンプルが表示されると順番にスライドが表示されます。手動で切り替えるときは、左上の番号[1-4]をクリックします。スライド（イメージ上の）下の両サイドにマウスを移動すると矢印が表示されます。この矢印をクリックして手動で移動することもできます。

このサンプルは、jQueryのslideshow()プラグインを利用してスライドショーを表示します。サンプルが表示されると順番にスライドが表示されます。手動で切り替えるときは、左上の番号[1-4]をクリックします。スライド（イメージ上の）下の両サイドにマウスを移動すると矢印が表示されます。この矢印をクリックして手動で移動することもできます。 

$.slideshow({
    container: 'slideShow1',
    loader: 'jQuery/slideshow/images/slideshow_loader.gif',
    linksPosition: 'top',
    linksClass: 'pagelinks',
    linksSeparator: ' | ',
    fadeDuration: 400,
    activeLinkClass: 'activeSlide',
    nextslideClass: 'nextSlide',
    prevslideClass: 'prevSlide',
    captionPosition: 'bottom',
    captionClass: 'slideCaption',
    autoplay: 4,
    random: false,
    images: [
      {
        src: 'jQuery/slideshow/images/panda/Dynamic.jpg',
        caption: 'Panda Dynamic'
      },
      {
        src: 'jQuery/slideshow/images/panda/Actual.jpg',
        caption: 'Panda Actual'
      },
      {
        src: 'jQuery/slideshow/images/panda/Panda.jpg',
        caption: 'Fiat Panda'
      },
      {
        src: 'jQuery/slideshow/images/panda/Active.jpg',
        caption: 'Panda Active'
      }
    ]
});