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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.cycle2.min.js"></script>
<script>
	$(window).load(function(){
		$('.mySlideshows').cycle({
			fx: 'fade',
			next: '#next',
			prev: '#prev'
		});
	});
</script>


//オプション一覧
allowWrap:        true,
autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
delay:            0,
easing:           null,
fx:              'fade',
hideNonActive:    true,
loop:             0,
manualFx:         undefined,
manualSpeed:      undefined,
manualTrump:      true,
maxZ:             100,
pauseOnHover:     false,
reverse:          false,
slideActiveClass: 'cycle-slide-active',
slideClass:       'cycle-slide',
slideCss:         { position: 'absolute', top: 0, left: 0 },
slides:           '> img',
speed:            500,
startingSlide:    0,
sync:             true,
timeout:          4000,
updateView:       0,
caption:          '> .cycle-caption',
captionTemplate:  '{{slideNum}} / {{slideCount}}',
overlay:          '> .cycle-overlay',
overlayTemplate:  '<div>{{title}}</div><div>{{desc}}</div>',
captionModule:    'caption',
loader: false,
pager:            '> .cycle-pager',
pagerActiveClass: 'cycle-pager-active',
pagerEvent:       'click.cycle',
pagerTemplate:    '<span>•</span>',
next:             '> .cycle-next',
nextEvent:        'click.cycle',
disabledClass:    'disabled',
prev:             '> .cycle-prev',
prevEvent:        'click.cycle',
swipe:            false,
progressive:      false,
tmplRegex:        '{{((.)?.*?)}}'
<div class="mySlideshows">
	<img src="<PATH>/img01.jpg">
    <img src="<PATH>/img03.jpg">
    <img src="<PATH>/img04.jpg">
    <img src="<PATH>/img05.jpg">
</div>
<div class="control">
    <button id="prev" class="red">Prev</button> 
    <button id="next" class="blue">Next</button>
</div>

cycle2について

cycle2は、非常に多機能な画像ギャラリープラグインです。
オプションやイベントなども豊富に用意されていて、あらゆる目的で使うことができます。
他のプラグインと違いスタイル面はほぼサポートされていないので、prev,nextボタンや、ページャーなどは自前で用意する必要があります。
使う機能によって対応ブラウザが変わるので注意してください。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL
対応ブラウザ

関連するjQueryプラグイン

  • GalleryView

    GalleryView

    設置は簡単なのにリッチなギャラリー

  • AppleStyleSlideshowGallery

    AppleStyleSlideshowGallery

    キレイ目な画像ギャラリーを簡単に設置できる

  • SlideScale

    SlideScale

    簡単に設置できる画像ギャラリー

  • Craftyslide

    Craftyslide

    とても簡単に設置できる画像ギャラリー

  • ExcoloSlider

    ExcoloSlider

    シンプルなレスポンシブ対応の画像ギャラリー