0

我正在为工作创建一个 jQuery Carousel Slider 插件，它在下一个、上一个和使用分页链接时运行良好。我遇到的问题是我在每张幻灯片中都有内容。当我单击下一个或上一个按钮时，它会隐藏 currentSlides 内容，然后当移动到下一张幻灯片的动画完成时。它向上滑动新的幻灯片内容。我的问题是当我使用分页并说我在幻灯片 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);
                    }
                });


            }
4

0 回答 0