2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」
画像などメディア部分と説明するテキスト部分を分割したいという人もいるかと思います。
jQueryプラグインの「dualSlider」では、これを実現してくれます。
これにより画像にテキストを乗せたり、解説テキストを十分に記述することができます。
使用方法
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">
<!-- ここからメディア１ -->
<div class="item item_1">
アイテム1
</div><!-- /item -->
<!-- ここまでメディア１ 以後要素分 -->
</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;
}
サンプル
Javascriptサンプルページ一覧
skuare.net