1

I'm using the coda-slider like in example 2. Now I don't want the behavior that the slider rewinds back to the first element if it is on the last element. I want that the slider only moves in the right direction (and of course starts with the first element).

The coda slider seems to use the jQuery animate function:

    function autoSlide() {
        if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
            if (currentPanel == panelCount) {
                var offset = 0;
                currentPanel = 1;
            } else {
                var offset = - (panelWidth*currentPanel);
                currentPanel += 1;
            };
            alterPanelHeight(currentPanel - 1);
            // Switch the current tab:
            slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
            // Slide:
            $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
            setTimeout(autoSlide,settings.autoSlideInterval);
        };
    };

Are there any chances that a parameter in the animate function will do the job?

The coda slider itself only supports this parameters.

4

2 に答える 2

1

これは少し古いことに気付きましたが、自分でこの問題に遭遇したので、他の誰かがこれを行う必要がある場合に備えて、どのように行ったかを投稿したいと思いました.

したがって、最初に最初のパネルの追加コピーを作成し、それをパネル コンテナーの最後に配置する必要があります。これは、コンテナで codaSlider を呼び出す前に行う必要があります。また、所有しているパネルの量をハードコーディングする必要があります。そう...

$(document).ready(function(){
    $('.panel-container .panel').eq(0).clone().appendTo('.panel-container');
    $("#main-photo-slider").codaSlider();
});

次に、autoslide()関数を次のように変更します。

function autoSlide() {
    if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
        if (currentPanel == panelCount) {
            $('.panelContainer').css({'left':'0px'});
            var offset = 1;
            currentPanel = 2;
        } else {
            var offset = - (panelWidth*currentPanel);
            currentPanel += 1;
        };
        alterPanelHeight(currentPanel - 1);
        // Switch the current tab:
        slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
        // Slide:
        $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
        setTimeout(autoSlide,settings.autoSlideInterval);
    };
};

これは機能するはずですが、望ましくない結果が生じる可能性があります。たとえば、ナビゲーション バーを使用すると、最後の画像への余分なリンクが作成されます。これは、最後の画像の上にある [次へ] ボタンと [前へ] ボタンの場合と同じです。最初の画像...ここで説明されているカスタムNavを使用したため、これは私にとって問題ではありませんでした: http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

于 2012-04-04T23:56:26.407 に答える