CODEWITHSUNDEEP
javascriptjqueryslidercoda-slider
testing
testing

Reputation: 20289

Coda-Slider should not slide back over all elements if the slider starts from the beginning

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.

Upvotes: 1

Views: 1386

Answers (2)

Luan
Luan

Reputation: 21

The Coda Slider uses serialScroll. If you do not want the slider to go back to the first element after it reaches the end, open the jquery.serialScroll file (jquery.serialScroll-1.2.1.js), go to line 37 and change the cycle from “true” to “false”.

cycle:false, //cycle endlessly ( constant velocity )

Upvotes: 2

Serj Sagan
Serj Sagan

Reputation: 30218

I noticed this one is a bit old, but I ran into this problem myself and wanted to post how I did it, in case someone else needs to do this also.

So the first thing we need to do is create an extra copy of our first panel and place it at the end of the panel container. This must be done BEFORE we call the codaSlider on our container. You will also need to hardcode the amount of panels you have. So...

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

Then, change the autoslide() function to:

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);
    };
};

That should work, but it could produce some undesireable results, for example if you use the Nav bar it would create an extra link to the last image, this would be the same case with the Next/Prev buttons when they are over the last/first image... this was not an issue for me because I used a custom Nav that's talked about here: http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

Upvotes: 1

Related Questions