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

  • files
  • js
  • html
<link href="<PATH>/jquery.excoloSlider.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.excoloSlider.min.js"></script>
<script>
    $(window).load(function(){
		$('#ExcoloSliderDemo01').excoloSlider();
    });
</script>

//オプション一覧
width: 800,
height: 530,
autoSize: true,
touchNav: true,
mouseNav: true,
prevnextNav: true,
prevnextAutoHide: true,
pagerNav: true,
startSlide: 1,
autoPlay: true,
delay: 0,
interval: 3000,
repeat: true,
playReverse: false,
hoverPause: true,
captionAutoHide: false,
animationCssTransitions: true,
animationDuration: 500,
animationTimingFunction: "linear",
prevButtonClass: "slide-prev",
nextButtonClass: "slide-next",
activeSlideClass: "es-active",
slideCaptionClass: "es-caption",
pagerClass: "es-pager",
<div id="ExcoloSliderBox">
	<div id="ExcoloSliderDemo01" class="slider">
		<img src="<PATH>/img01.jpg" />
		<img src="<PATH>/img02.jpg" />
		<img src="<PATH>/img03.jpg" />
		<img src="<PATH>/img05.jpg" />
		<img src="<PATH>/img06.jpg" />
		<img src="<PATH>/img07.jpg" />
		<img src="<PATH>/img08.jpg" />
	</div>
</div>

ExcoloSliderについて

ExcoloSliderは、シンプルなレスポンシブ対応の画像ギャラリーです。
タッチイベントにも対応しており、オプションで細かいカスタマイズが可能になっています。
画像の幅と高さを無理やり同じにしているようなので、縦横比の違う画像を並べると縮んだり、伸ばされたりするようです。
なんかいい方法あるのかな??
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Orbit

    Orbit

    画像の切り替えタイミングを見た目で表示できる画像ギャラリー

  • EasyGallery

    EasyGallery

    名前の通りイージーに設置できる画像ギャラリー

  • Craftyslide

    Craftyslide

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

  • desSlideshow

    desSlideshow

    一味違う画像ギャラリー

  • Rondell

    Rondell

    奥行きのある画像ギャラリーが設置できる