Theme Light

Theme Dark

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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.easing.1.3.js"></script>
<script src="<PATH>/jquery.mousewheel.js"></script>
<script src="<PATH>/jQueryArtDesignSlider.js"></script>
<script>
    $(window).load(function(){
		$("#ArtDesignSliderDemo").ArtDesignSlider({
			SliderWidth: 400,
			SliderHeight: 250
		});
    });
</script>
<p class="title">Theme Light</p>
<div id="ArtDesignSliderDemo01" class="ArtDesignSlider-demo">
	<ul>
		<li data-slider-title="Title 1" data-slider-description="Description 1">
			<img src="<PATH>/imgb01.jpg"/>
		</li>
		<li data-slider-title="Title 2" data-slider-description="Description 2">
			<img src="<PATH>/imgb02.jpg"/>
		</li>
		<li data-slider-title="Title 3" data-slider-description="Description 3">
			<img src="<PATH>/imgb03.jpg"/>
		</li>
		<li data-slider-title="Title 4" data-slider-description="Description 4">
			<img src="<PATH>/imgb04.jpg"/>
		</li>
		<li data-slider-title="Title 5" data-slider-description="Description 5">
			<img src="<PATH>/imgb05.jpg"/>
		</li>
		<li data-slider-title="Title 6" data-slider-description="Description 6">
			<img src="<PATH>/imgb06.jpg"/>
		</li>
		<li data-slider-title="Title 7" data-slider-description="Description 7">
			<img src="<PATH>/imgb07.jpg"/>
		</li>
	</ul>
</div>

<p class="title mt50">Theme Dark</p>
<div id="ArtDesignSliderDemo02" class="ArtDesignSlider-demo">
	<ul>
		<li data-slider-title="Title 1" data-slider-description="Description 1">
			<img src="<PATH>/imgb08.jpg"/>
		</li>
		<li data-slider-title="Title 2" data-slider-description="Description 2">
			<img src="<PATH>/imgb09.jpg"/>
		</li>
		<li data-slider-title="Title 3" data-slider-description="Description 3">
			<img src="<PATH>/imgb10.jpg"/>
		</li>
		<li data-slider-title="Title 4" data-slider-description="Description 4">
			<img src="<PATH>/imgb11.jpg"/>
		</li>
		<li data-slider-title="Title 5" data-slider-description="Description 5">
			<img src="<PATH>/imgb12.jpg"/>
		</li>
		<li data-slider-title="Title 6" data-slider-description="Description 6">
			<img src="<PATH>/imgb13.jpg"/>
		</li>
		<li data-slider-title="Title 7" data-slider-description="Description 7">
			<img src="<PATH>/imgb14.jpg"/>
		</li>
	</ul>
</div>

ArtDesignSliderについて

ArtDesign Sliderはシンプルながらもクールなデザインの画像ギャラリーです。 オプションも程よく用意されているのである程度自分好みにカスタマイズできます。 css要らずな点もいいですね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL v3
対応ブラウザ

関連するjQueryプラグイン

  • JustifiedGallery

    JustifiedGallery

    画像を隙間なく配置してくれる

  • GalleryView

    GalleryView

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

  • cycle2

    cycle2

    非常に多機能な画像ギャラリー

  • ExcoloSlider

    ExcoloSlider

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

  • FlowGallery

    FlowGallery

    簡単にインパクトのある画像ギャラリーを設置できる