0

さまざまなリストのカルーセルがあります。そして、私は次のボタンを持っています。ボタンをクリックすると、カルーセルが200ピクセル左に移動します。あなたが他の画像を見ることができるより。しかし、私はこのカスタムメイドのカルーセルに問題があります。

スクリプトをJsfiddleに配置しました：http：//jsfiddle.net/kwdMP/2/

カルーセルの.indexを取得したいと思います。ただし、カルーセルは.indexでは機能しません。このカルーセルを修理するために、誰が私を助けることができますか？みんな助けてくれてありがとう！

これは私のjsコードです：

$(document).ready(function() {
    // Add width en height to the container - wrapper
    var ul = $('.list-thumbnails');
    var lengthUL = $('.list-thumbnails').length + 1;
    var containerWidth = $(ul).outerWidth() * lengthUL;

    $('.container-list-thumbnails').css({
        width: containerWidth
    });


    // Buttons for next and previous
    $('.container-thumbnails').append('<div class="buttons"><a href="#" title="Ga naar de vorige" class="previous">Vorige</a><a href="#" title="Ga naar de volgende" class="next">Volgende</a></div>')
    var buttonPrevious = $('.container-thumbnails .previous');
    var buttonNext = $('.container-thumbnails .next');

    buttonNext.click(function(e) {
        e.preventDefault();

        if (this.ignoreButtons) {
            return;
        }

        var section = $('.container-list-thumbnails');
        var sectionIndex = section.index();

        var x = -300 * (sectionIndex + 1);

        console.log(x);

        this.ignoreButtons = true;

        $('.container-list-thumbnails').animate({
            left: x,
        }, function() {
            this.ignoreButtons = false;
        }.bind(this));
    }.bind(this));
});
​
4

1 に答える 1

1

両方のボタンにワンクリックハンドラーを使用し、 jQueryを使用sectionIndexして親要素に格納するようにスライダーを変更しました。ゼロを下回ったり、サムリストの長さを超えたりしないように、もう少し調整する必要があります。buttonsdata('sectionIndex')

$('.buttons').data('sectionIndex', 0);
var section = $('.container-list-thumbnails');
$('.buttons a').click(function(e) {
    e.preventDefault();
    var isNext = $(this).is('.next');
    var $parent = $(this).parent();

    //if (this.ignoreButtons) {
        //return;
    //}
    var currIndex = $parent.data('sectionIndex');

    var sectionIndex = isNext ? currIndex + 1 : currIndex - 1;

    $parent.data('sectionIndex', sectionIndex);

    var x = -300 * sectionIndex;

    console.log(x);

    // this.ignoreButtons = true;
    $('.container-list-thumbnails').animate({
        left: x,
    }, function() {
        this.ignoreButtons = false;
    });
});

デモ：http：//jsfiddle.net/kwdMP/3/

于 2012-11-24T14:10:14.050 に答える