仕事用に jQuery Carousel Slider Plugin を作成していますが、次、前、およびページネーション リンクを使用してうまく動作します。私が抱えている問題は、各スライドにコンテンツがあることです。次または前のボタンをクリックすると、currentSlides のコンテンツが非表示になり、次のスライドに移動するアニメーションが完了すると非表示になります。新しいスライド コンテンツを上にスライドします。私の問題は、ページネーションを使用して、スライド 1 にいると言って、クリックしてスライド 4 にすると機能しますが、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);
}
});
}