[英]jQuery Carousel Next / Previous Buttons
Here's the Link to the Fiddle . 这是小提琴的链接 。
I'm working with a carousel and I want to make the next/previous buttons functional. 我正在使用轮播,并且想使下一个/上一个按钮起作用。
I tried adding the following code but it doesn't update the index properly. 我尝试添加以下代码,但无法正确更新索引。 Any help would be appreciated! 任何帮助,将不胜感激!
$($btnNext).click(function (event) {
updateSlides(index + 1);
event.preventDefault();
}
$($btnPrev).click(function (event) {
updateSlides(index - 1);
event.preventDefault();
}
When the click
event on those buttons is called, that index
variable is undefined. 调用这些按钮上的click
事件时,该index
变量未定义。 There are several different ways of figuring out the index, the method I used in the fiddle was to set an attribute
on the slider
and then check it on the click
events: 找出索引有几种不同的方法,我在小提琴中使用的方法是在slider
上设置一个attribute
,然后在click
事件上对其进行检查:
function updateSlides(index, paused) {
$($slider).attr('data-index', index);
...
}
$($btnNext).click(function (event) {
var index = parseInt($('.slider').attr('data-index'));
if(index > $('.slider .content li').length) {
index = 0;
}
console.log('#next', index);
updateSlides(index + 1);
event.preventDefault();
});
$($btnPrev).click(function (event) {
var index = parseInt($('.slider').attr('data-index'));
if(index < 0) {
index = 0;
}
console.log('#previous', index);
updateSlides(index - 1);
event.preventDefault();
});
See the updated fiddle here: http://jsfiddle.net/sbp76sLc/14/ 在此处查看更新的小提琴: http : //jsfiddle.net/sbp76sLc/14/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.