2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」

画像などメディア部分と説明するテキスト部分を分割したいという人もいるかと思います。
jQueryプラグインの「dualSlider」では、これを実現してくれます。
これにより画像にテキストを乗せたり、解説テキストを十分に記述することができます。
2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」サンプル

使用方法
dualSliderからファイルをダウンロード。
またjquery.jsのほか、jquery.easing.1.3.jsjquery.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

「2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」」をシェアする

記事作成:
記事URL:

TOP > > > 2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」