2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」
画像などメディア部分と説明するテキスト部分を分割したいという人もいるかと思います。
jQueryプラグインの「dualSlider」では、これを実現してくれます。
これにより画像にテキストを乗せたり、解説テキストを十分に記述することができます。
sponsors
使用方法
dualSliderからファイルをダウンロード。
またjquery.jsのほか、jquery.easing.1.3.js、jquery.timers.jsプラグインも必要です。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>
<script type="text/javascript" src="jquery.dualSlider.0.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".carousel").dualSlider({
auto:true, //自動スライド
autoDelay: 6000, //間隔
easingCarousel: "swing", //easingプラグインのエフェクト
easingDetails: "easeOutBack",//easingプラグインのエフェクト詳細部分
durationCarousel: 1000, //長さ
durationDetails: 600 //詳細部分の長さ
});
});
</script>
html側は以下のように記述していきます。
<div class="carousel">
<!-- 詳細部分 -->
<div class="panel">
<div class="details_wrapper">
<div class="details">
<!-- ここから詳細1 -->
<div class="detail">
詳細部分1
</div><!-- /detail -->
<!-- ここまで詳細1 以後要素分 -->
</div><!-- /details -->
</div><!-- /details_wrapper -->
<!-- ページング -->
<div class="paging">
<div id="numbers"></div>
<a href="javascript:void(0);" class="previous" title="Previous" style="display:none;">Previous</a>
<a href="javascript:void(0);" class="next" title="Next">Next</a>
</div><!-- /paging -->
</div><!-- /panel -->
<!-- ここまで詳細部分 -->
<!-- ここからメイン部分 -->
<div class="backgrounds">
<!-- ここからメディア1 -->
<div class="item item_1">
アイテム1
</div><!-- /item -->
<!-- ここまでメディア1 以後要素分 -->
</div><!-- /backgrounds -->
</div><!-- /carousel -->
最後にCSSで調整します。
/* 全体の大きさ調整 */
.carousel{
margin: 0;
position:relative;
height: 340px;
width: 880px;
overflow:hidden;
}
.carousel .backgrounds{
height: 354px;
}
/* メディア部分 */
.carousel .backgrounds .item{
width: 880px;
height: 340px;
float:left;
position:relative;
z-index:1;
}
/* 詳細部分 */
.carousel .panel{
background: #000;
color: #fff;
position:absolute;
right: 0;
top:0;
height: 340px;
width: 275px;
z-index:10;
}
/* ページング */
.carousel .panel .paging{
position:absolute;
bottom: 25px;
left:25px;
width: 225px;
text-align:center;
}
.carousel .panel .paging a{
color: #4c4c4c;
font-size: 1.1em;
}
.carousel .panel .paging .next{
position:absolute;
right:0;
bottom:0;
display:block;
width: 11px;
height: 14px;
background: transparent url(carousel_next_bg.gif) no-repeat 0 0;
text-indent: -6000px;
}
.carousel .panel .paging .previous{
position:absolute;
left:0;
bottom:0;
display:block;
width: 11px;
height: 14px;
background: transparent url(carousel_previous_bg.gif) no-repeat 0 0;
text-indent: -6000px;
}
.carousel .panel .paging #numbers a {
padding: 0 5px 0 5px;
}
.carousel .panel .paging #numbers a.selected {
color: #fff;
}
2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」サンプル
sponsors
記事作成:2010年6月 8日 10:06
記事URL:http://www.skuare.net/2010/06/21jquerydualslider.html
TOP > javascript > 画像関連 > 2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」
前の記事:[メモ]リニューアル。主にhtml5とiPhoneについて
次の記事:選択した項目を明示させられるjQueryプラグイン「lister」
あなたにはこちもお勧め!
jQuery プラグインまとめ!