Coda-Slider не должен скользить назад по всем элементам, если слайдер начинается с начала - PullRequest
Новая
       38

Coda-Slider не должен скользить назад по всем элементам, если слайдер начинается с начала

1 голос
/ 31 октября 2011

Я использую coda-slider , как в примере 2. Теперь я не хочу, чтобы слайдер перематывал назад к первому элементу, если он находится на последнем элементе. Я хочу, чтобы ползунок двигался только в правильном направлении (и, конечно, начинается с первого элемента).

Кажется, что слайдер Coda использует функцию jQuery animate: 

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

Есть ли вероятность, что параметр в функции animate выполнит эту работу?

Сам ползунок coda поддерживает только эти параметры .

Ответы [ 2 ]

2 голосов
/ 11 мая 2013

Coda Slider использует serialScroll.Если вы не хотите, чтобы ползунок возвращался к первому элементу после его окончания, откройте файл jquery.serialScroll (jquery.serialScroll-1.2.1.js), перейдите к строке 37 и измените цикл с «true».на «ложь». 

cycle:false, //cycle endlessly ( constant velocity )
1 голос
/ 05 апреля 2012

Я заметил, что это немного устарело, но я сам столкнулся с этой проблемой и хотел опубликовать, как я это сделал, на тот случай, если кому-то еще нужно сделать это тоже.

Итак, первое, что нам нужноДля этого нужно создать дополнительную копию нашей первой панели и поместить ее в конец контейнера панели.Это должно быть сделано ДО того, как мы вызовем 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);
    };
};

Это должно работать, но это может привести к нежелательным результатам, например, если вы используетеПанель навигации создаст дополнительную ссылку на последнее изображение, это будет то же самое, что и кнопки Next / Prev, когда они находятся над последним / первым изображением ... это не было проблемой для меня, потому что я использовал пользовательский Navоб этом здесь говорится: http://css -tricks.com / creation-a-slick-auto-play-featured-content-slider /

...