我正在为工作创建一个jQuery Carousel Slider插件,它可以在下一个,之前和使用分页链接上运行良好。我遇到的问题是我在每张幻灯片中都有内容。当我单击它隐藏的下一个或上一个按钮时,当前滑动内容,然后当移动到下一张幻灯片的动画完成时。它会滑动新的幻灯片内容。我的问题是,当我使用分页并说我在幻灯片1并点击滑动4它有效,但如果我超过四,它不起作用。我不是最先进的编码器,但这是我的代码......有人帮我看看这个愚蠢的问题:P
lsAdvancedSlider.prototype.slideLeft = function(numberOfSlides){
var parent = this,
slideNum = numberOfSlides;
if(parent.slideFlag == false){ //only slide if there is not current sliding going on
//set slide flag to true so it doesnt break
parent.slideFlag = true;
if(numberOfSlides > 1){ //used if pagination is used
//the new left we are going to be giving to the animate to create the sliding effect
var newLeft = parent.singleImageWidth * (numberOfSlides);
//lets get the current slide and current pagination buttong
var currentSlide = parent.carouselInner.find(".activeSlide"),
currentLink = parent.carouselInner.find(".active-link");
//now that we got the actives we need to find where we are going to go
var nextSlide = $("#slide_" + (parseInt(currentSlide.attr("id").replace("slide_", "")) + numberOfSlides)),
nextLink = $("#slideTo_" + (parseInt(currentLink.attr("id").replace("slideTo_", "")) + numberOfSlides));
//now we need to hide the content
//of the current slide
currentSlide.find(".slideContentCenter").animate({
top: "+=" + parent.customHeight
},{
queue: true,
duration: "fast"
});
//add remove classes
currentSlide.removeClass("activeSlide");
currentLink.removeClass("active-link");
nextSlide.addClass("activeSlide");
nextLink.addClass("active-link");
//now time to addSlides so it does not appear as it is being cut off
var i = numberOfSlides; //i do not want to lose the numberOfSlides I will need it later
var pos = 0; //the pos will start from zero to get the first slide and count as we add the clones to the end so it will keep its order
while(i > 0){
var first = $(parent.carouselItem).eq(pos).clone();
var last = $(parent.carouselItem).last();
first.insertAfter(last);
pos++; //increase in pos to get the second, third and so on slide
--i; //decrease the number of slides we are going so when we get the to slide we need to we can run other fancy fun stuff
}
//because we have more slides we need to update the width of our wrapper to hold them all
parent.wrapper.width($(parent.carouselItem).length * parent.singleImageWidth);
//now since we are sliding left we do not need to move the wrapper at all until now :)
parent.wrapper.animate({
left: "-=" + newLeft
}, {
queue: true,
duration: 750,
complete: function( ){
//time to delete the slides we added to the front
while(numberOfSlides > 0){
$(parent.carouselItem).first().remove();
--numberOfSlides;
}
parent.wrapper.width($(parent.carouselItem).length * parent.singleImageWidth);
//since we deleted the extra slides we need to now move to the right a couple of px ;) so its correct
//do it with a duration 0 so no one knows :)
parent.wrapper.animate({"left": "+=" + newLeft + "px"}, { queue: true, duration: 0});
//time to show the content
var content2 = nextSlide.find(".slideContentCenter");
console.log(content2);
//now lets show it since we got it :)
setTimeout(function( ){
content2.animate({
top: "-=" + parent.customHeight
}, {duration: 200 });
}, 100);
//set the flag to flase stating we are at the end of the sliding feature and make it take 2 seconds before the next or prev button work
setTimeout(function( ){
parent.slideFlag = false;
}, 200);
}
});
}