skuare.net

コンテンツをスライド表示するjavascript「Coda-Slider」

Web上には無限大のスペースが広がっています。
しかし、コンテンツの多さ＝見やすさには決してなりません。
coda-sliderは多くなってしまったコンテンツをスライドのように表示することで、見やすさも得ることができます。

使用方法
coda-sliderからjquery.easing.js、slideviewer.jsを、jQueryからjquery.js（v1.1）をそれぞれダウンロードします。
また、zipファイル内のindex.htmlからcssを取り除きます。
（jCodaSlider.css＊画像パスを各自変更してください）
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.easing.js" type="text/javascript"></script>
<script src="http://yourdomain/slideviewer-compact.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/jCodaSlider.css" type="text/css">
<script type="text/javascript">
$(window).bind("load", function() {
$("#id名").slideView()
});
</script>
後はスライドをHTMLで以下の様に記述します。
<div class="slider-wrap">
<div id="id名" class="svw">
<div class="panelContainer">
<!-- スライド部分 -->
<div class="panel" title="Panel 1">
<div class="wrapper">
コンテンツ
</div>
</div>
<!-- スライド部分 -->
</div>
</div>
</div>
コンテンツをスライド表示するjavascript「Coda-Slider」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：コードをハイライト表示するjavascript「Chili」
次の記事：MacOSX風の検索フォームを作成するjavascript「AppleSearch」

関連記事

• [jQuery]wSlide
• アクセッシブルなスライダーjavascript「Accessible News Slider」
• 簡単導入スライドjavascript「jquery.toggleElements.js」
• スライドするパネルを作成するjavascript「jQuery Sliding Panels」
• スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」