一連の div を循環する非常に単純なカルーセルを作成しましたが、今は少し行き詰まっています...この場合、カルーセルをループslide 01
さslide 07
せたいと思っています。したがって、slide 07
取得した後slide 01
。ただし、カルーセル プラグインを使用していない理由 (ご指摘のとおり) は、オーバーハングが必要なためです。したがって、オンにすると、左側に 50 ピクセル、右側に 50 ピクセルがslide 01
表示されます。
ここで私の jsFiddle デモを参照してください: http://jsfiddle.net/neal_fletcher/BBXnP/3/
HTML:slide 07
slide 02
<div class="outerwrapper">
<div class="innerwrapper">
<div class="inner-slide">SLIDE 01</div>
<div class="inner-slide">SLIDE 02</div>
<div class="inner-slide">SLIDE 03</div>
<div class="inner-slide">SLIDE 04</div>
<div class="inner-slide">SLIDE 05</div>
<div class="inner-slide">SLIDE 06</div>
<div class="inner-slide">SLIDE 07</div>
</div>
</div>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
jQuery:
$(function () {
var animating = false,
outerwrap = $(".outerwrapper");
$("#right, #left").click(function () {
if (animating) {
return;
}
var dir = (this.id === "right") ? '+=' : '-=',
width = $(".inner-slide").width();
animating = true;
outerwrap.animate({
scrollLeft: dir + width
}, 600, function () {
animating = false;
});
});
});
参考までに、最終的には BBC のホームページのスライダー ( http://www.bbc.co.uk ) のように機能します。このスライダーでは、次のセクションと前のセクションが下に表示されます。
どんな提案でも大歓迎です!