jQueryでスライドショー表示を行うJavascript 「Nivo Slider」を設置する方法

jQueryを利用したスライドショープラグイン、「nivo slider」の紹介です。
多機能なJavascriptなのですが、今回は最もシンプルな設置方法を紹介します。

  1. デモ
  2. 準備
  3. 設置方法
  4. 参考サイト

1.デモ

「Nivo Slider」のオフィシャルサイトのデモページで動作デモを確認することができます。
「Nivo Slider」オフィシャル デモページ

2.準備

スライドショーで表示するための画像を3枚ほど用意しておきましょう。
各画像は、全く同じサイズで用意しておくとデザインの形が崩れずよいかと思います。

3.設置方法

 手順1 「Nivo Slider」のダウンロード

「Nivo Slider」の設置に必要なファイルをダウンロードします。
Nivo Slider on Github

ファイルのダウンロードボタン
ファイルのダウンロードボタン

手順2 「Nivo Slider」用ファイルをサイトフォルダ内に配置

ダウンロードした圧縮ファイルを展開し、「themes」フォルダ、「jquery.nivo.slider.pack.js」「nivo-slider.css」ファイルのみをローカルサイトフォルダに配置してください。

手順3 スクリプト読み込みコードの記述

以下のコードを「Nivo Slider」を利用するページの<head>タグ内に記述してください。

<link rel="stylesheet" href="nivo-slider.css">
<link rel="stylesheet" href="themes/default/default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
 $('#slider').nivoSlider();
});
</script>

手順4 スライドショー用画像の配置

スライドショーを設置したい場所に以下のコードを記述し、<img>タグ部分のみ適宜差し替える。

<div class="slider-wrapper theme-default">
 <div id="slider" class="nivoSlider">
  <img src="images/slide1.jpg" alt="">
  <img src="images/slide2.jpg" alt="">
  <img src="images/slide3.jpg" alt="">
 </div>
</div>

5.カスタマイズ

スライドショーのアニメーションや切り替わり速度などをカスタマイズしたい場合には、スライドショーの設定スクリプトを以下のコードに差し替え、適宜数値などを変更してください。

$('#slider').nivoSlider();
$('#slider').nivoSlider({
  effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
  slices: 15, // For slice animations
  boxCols: 8, // For box animations
  boxRows: 4, // For box animations
  animSpeed: 500, // Slide transition speed
  pauseTime: 3000, // How long each slide will show
  startSlide: 0, // Set starting Slide (0 index)
  directionNav: true, // Next & Prev navigation
  controlNav: true, // 1,2,3... navigation
  controlNavThumbs: false, // Use thumbnails for Control Nav
  pauseOnHover: true, // Stop animation while hovering
  manualAdvance: false, // Force manual transitions
  prevText: 'Prev', // Prev directionNav text
  nextText: 'Next', // Next directionNav text
  randomStart: false, // Start on a random slide
  beforeChange: function(){}, // Triggers before a slide transition
  afterChange: function(){}, // Triggers after a slide transition
  slideshowEnd: function(){}, // Triggers after all slides have been shown
  lastSlide: function(){}, // Triggers when last slide is shown
  afterLoad: function(){} // Triggers when slider has loaded
});

6.参考サイト

以下、参考サイトです。