[JS]シンプルで軽量だけど、充分な機能を備えたコンテンツスライダーのスクリプト -Casual Slider

サイト構築 -JavaScript

Post on:2012年3月23日

Casual Sliderの特徴

Casual Sliderは実装が簡単で、シンプルながら充分な機能を備えたコンテンツスライダーです。

4KBと超軽量のスライダー
タイマー機能付き
あらゆるHTMLエレメントを配置可能
全てのメジャーブラウザをサポート
カスタムナビゲーション
セットアップが簡単
アニメーションの種類は多数
デフォルトのテーマも用意

Casual Sliderのデモ

デモもシンプルですが、Casual Sliderの使い勝手が分かると思います。

デモ
各スライダーはさまざまなアニメーションでスライドします。

[ad#ad-2]

動画も配置可能です。

各パネルに半透明のキャプションも表示できます。

Casual Sliderの使い方

HTML

各パネルはリスト要素で実装します。

<div id="slider">
    <div classs="content">
        <ul>
            <li> Content slide 1 <li>
            <li> Content slide 1 <li>
            <li> Content slide 1 <li>
        </ul>
    </div>
</div>

外部ファイル

スタイルシートとスクリプトを外部ファイルとして配置します。
デモのデザインはデフォルトのテーマで、自由に変更可能です。

<link rel="stylesheet" href="css/cslider.css" type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cslider.min.js"></script>

JavaScript

スライダーを内包するdiv要素をjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
$(document).ready(function(){
     $("#slider").cSlider();
});
</script>

スクリプトのオプション

スクリプトのオプションでは、スライダーのサイズ、アニメーション、アロー・ナビゲーション・キャプションの有無などを簡単に設定できます。

<script type="text/javascript">
$(document).ready(function(){
    $("#slider").cSlider({
      width: 600, // スライダーの幅
      height : 300, // スライダーの高さ
      speed : 300, // アニメーションのスピード
      ease : 'swing' // アニメーションのタイプ
      arrows: true, // アローの有無
      navigation: true, // ナビゲーションの有無
      captions: true // キャプションの有無
      timer: true, // タイマーの有無
      time: 5000 // タイマーの時間
    });
});
</script>