このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/nivo-slider.css" rel="stylesheet" />
<link href="<PATH>/themes/default/default.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.nivo.slider.pack.js"></script>
<script>
	$(window).load(function(){
		$('#slider').nivoSlider();
	});
</script>

//オプション一覧
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
<div class="theme-default">
	<div id="slider" class="nivoSlider">
		<img src="<PATH>/img06.jpg" alt="" />
		<img src="<PATH>/img02.jpg" alt="" />
		<img src="<PATH>/img08.jpg" alt="" />
		<img src="<PATH>/img04.jpg" alt="" />
		<img src="<PATH>/img03.jpg" alt="" />
		<img src="<PATH>/img05.jpg" alt="" />
	</div>
</div>

NivoSliderについて

NivoSliderは、簡単にリッチなスライダーを設置できるプラグインです。
テーマも4種類用意されており、スライドアニメーションも楽しませてくれます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • FOTORAMA

    FOTORAMA

    フルスクリーンの切り替えができたりするスライダー

  • FlexSlider

    FlexSlider

    簡単に多機能なスライダーを設置でき、豊富なオプションを備えている

  • bxSlider

    bxSlider

    とても簡単にスライダーを設置することができ、機能も豊富

  • Fathom

    Fathom

    プレゼン向きのスライダープラグイン

  • AwkwardShowcase

    AwkwardShowcase

    シンプルなスライダーからちょっと豪華なスライダーまで幅広く設定可能