我正在使用示例2中的coda-slider。现在我不希望滑块回退到第一个元素的行为,如果它在最后一个元素上。我希望滑块只在正确的方向上移动(当然从第一个元素开始)。
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滑块本身仅支持this parameters。
答案 0 :(得分:2)
Coda Slider使用serialScroll。如果您不希望滑块在到达结尾后返回第一个元素,请打开jquery.serialScroll文件(jquery.serialScroll-1.2.1.js),转到第37行并从“true”更改周期“假”。
cycle:false, //cycle endlessly ( constant velocity )
答案 1 :(得分: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);
};
};
这应该可行,但它可能会产生一些不可取的结果,例如,如果你使用导航栏,它会创建一个额外的链接到最后一个图像,这将与下一个/上一个按钮结束时相同的情况最后/第一张图片......这对我来说不是问题,因为我使用的是自定义导航,这里有人谈到: http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/