[JS]シンプル!高性能!超軽量!使い勝手の良いコンテンツスライダーのスクリプト -jContent

複数のコンテンツをスライド表示させる、シンプルながら高性能でカスタマイズ性にも優れた超軽量(3KB)のjQueryのプラグインを紹介します。

IE6, Firefox2 などのブラウザにも対応しています。

サイトのキャプチャ

jContent -jQuery simple content slider plugin
デモページ

[ad#ad-2]

jContentの主な特徴

  • スライダーにはテキスト、画像、Flash、動画などあらゆるコンテンツを配置可能。
  • 1ページに複数のスライダーを設置可能。
  • 自動送り機能(オプション)。
  • カルーセル機能(オプション)。
  • スライドの方向は、水平・垂直に対応。
  • カスタマイズは簡単。
  • クロスブラウザ対応。
    IE6+, Firefox2+, Chrome, Safari, Opera9+
  • Validなマークアップ
  • 利用は無料(GPL/MIT licence)。

jContentのデモ

デモではベーシックなスライダーの水平・垂直方向にスライドするものをはじめ、オプションで実装できる自動送り付き・カルーセルタイプの動作が確認できます。

デモのキャプチャ

デモ:ベーシックなスライダー:水平方向

デモのキャプチャ

デモ:ベーシックなスライダー:垂直方向

[ad#ad-2]

デモのキャプチャ

デモ:自動送り機能付きのスライダー:水平方向

デモのキャプチャ

デモ:自動送り機能付きのスライダー:垂直方向

デモのキャプチャ

デモ:カルーセル機能付きのスライダー:水平方向

デモのキャプチャ

デモ:カルーセル機能付きのスライダー:垂直方向

jContentの実装

実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。

HTML

<div id="demo">
	<a title="" href="#" class="prev"></a>
	<div class="slides">
		<div>...</div> 
		<div>...</div>             
		<div>...</div> 
		<div>...</div> 
	</div>
	<a title="" href="#" class="next"></a>
</div>

JavaScript

<script type="text/javascript" language="javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.easing.min.1.3.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.jcontent.js"></script>
<link href="css/jcontent.css" rel="stylesheet" type="text/css"/>
 
<script type="text/javascript" language="javascript">
$("document").ready(function(){
	$("div#demo1").jContent({orientation: 'horizontal',
		 easing: "easeOutCirc",
		duration: 500
});
</script>

jContentのダウンロード

下記ページより、スクリプトの本体(jquery.jcontent.js)やデモのファイル・CSSファイルをダウンロードできます。

sponsors

top of page

©2018 coliss