ニュースティッカーをjQueryで実装する／jquery.slider編

jQuery2013年2月15日

前回の記事では、bxsliderというプラグインを使用してニュースティッカーを作成しましたが、今回はjQuery sliderというプラグインを使って実装を試みました。

bxslider同様、本来画像のスライドショーとして使用する機会の多いプラグインですが、ニュースティッカーとしても活用することが可能です。

jQuery本体に加え、プラグイン「jQuery slider」が必要となります。
まずは下記のURLより必要なファイルをダウンロードし、読み込みを行ってください。

HTML

<div class="slider-01">
<div>【ニュース1】ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</div>
<div>【ニュース2】ふがふがふがふがふがふがふがふがふがふがふがふがふがふが</div>
<div>【ニュース3】もげもげもげもげもげもげもげもげもげもげもげもげもげもげ</div>
<div>【ニュース4】ほがほがほがほがほがほがほがほがほがほがほがほがほがほが</div>
<div>【ニュース5】もがもがもがもがもがもがもがもがもがもがもがもがもがもが</div>
</div>

CSS

.jquery-slider {
overflow: hidden;
position: relative;
}
.jquery-slider-element {
overflow: hidden;
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

div.slider-01{
border:1px solid #ccc;
margin-bottom:20px;
}

div.slider-01 div{
padding:4px;
}

js

$('.slider-01').slider({
width:600,
height:24,
showControls: false,
showPosition: true,
direction: 'left',
randomize:false,
wait:5000,
fade:1000
});

解説

ライブラリの読み込み後、各種オプションの値を設定して静止時間やスライド方向などをコントロールできます。

各種オプションの基本的な記述

各種オプションは、半角カンマ区切りのハッシュ形式で指定します。設定値や文字列はシングルもしくはダブルクォーテーションで囲み、それ以外のtrueかfalse、数値はそのまま記述することで設定が可能です。

$("#hoge").slider({
オプション:"値",
オプション:true,
オプション:500,
});

オプション一覧

height:高さを数値で指定
showPosition:trueで左右の遷移ボタン表示
direction:leftもしくはrightでスライドする方向を指定
randomize:trueでランダム表示
wait:静止時間を数値で指定
fade:イージングの速度を数値で指定

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。