COIN SLIDER


Description: クロスブラウザに対応したシンプルで使い勝手の良いギャラリー系プラグインです。マークアップもシンプルで導入も手軽に行えます。
Sample: demo
Tutorial: COIN SLIDER: IMAGE SLIDER WITH UNIQUE EFFECTS
License: -

Sample

Note

$(document).ready(function() {
	$('#games').coinslider({ hoverPause: false });
});

jQueryとプラグインを読み込んで上記設定で動作します。マークアップも単純です。

<div id="gamesHolder">
		<div id="games"> 

			<a href="#" target="_blank">
				<img src="1.jpg" alt="1" /><span><b>1のタイトル</b><br />のキャプションが入ります</span>
			</a> 

			<a href="http://example.com" target="_blank">
				<img src="2.jpg" alt="2" />
			</a> 

			<a href="#" target="_blank">
				<img src="3.jpg" alt="3" />
			</a> 

			<a href="#/" target="_blank">
				<img src="4.jpg" alt="4" />
			</a>
		</div>
	</div> 

Related snippet :

  • Description: 多くの形に対応できる高機能コンテンツスライダープラグインです。テキストなどや画像ギャラリー、上記画像のようなサムネイルギャラリーなども構築可能。表示 ...
  • Description: グリッドを守ったレイアウトを構築するプラグインです。モニタサイズに依存することなく、時系列を崩さないレイアウトを守れます。 Sample: ...
  • Description: ドロップダウンにアイコン画像を含めるプラグインです。あまり見やすいとは言えないドロップダウンなのでこうしてアイコンを含めるだけでかなり判りやすさが増 ...
  • Description: http://example.com/#hash01などで指定すればそれにあったスライドを表示させることが出来る、というもの。マウスホイールにも対応 ...
  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: 横長で可愛いコンテンツスライダーです。オート機能も追加されたようです。縦横のサイズを決めれば画像に限らず、様々なコンテンツを入れることが可能で、1ペ ...
  • Description: シンプルで多彩なスライダー。画像周りに無駄な装飾がないので既存のデザインにしっくり納められる汎用性がありますね。クロスブラウザで動作してくれます。m ...