Почему мой счетчик в карусели возвращает отрицательные значения после достижения индекса 0 и максимума?

Question

Почему мой счетчик имеет отрицательное значение после достижения индекса 0 и максимума?У меня есть код, который должен сбрасывать значение индекса на первый или последний индекс, когда это происходит.Когда пользователь нажимает кнопку «Следующая / Предыдущая», и он подходит к началу или концу карусели, индекс слайда должен быть сброшен до первого или последнего индекса в зависимости от текущей позиции индекса.

Мои слайды исчезают, когдапользователь нажимает следующие 6 раз, а затем нажимает на предыдущие 3 раза.

Если кто-нибудь может мне помочь с этим, я был бы очень признателен!

$(function() {
    // Default controls
    var defControls = {
        content: "img", // accepts any DOM element - div, img, table, etc...
        showControls: true, // true/false shows/hides the carousel's navigational controls
        effect: "default", // supports default, fade, slide, verticalSlide, slidingFade
        effectDuration: 0.25, // to be used in conjunction with effect - adjust the time of the effect measured in seconds
        prevText: "« Previous", // previous button text
        nextText: "Next »", // next button text
        containerWidth: 600, // determines the width of the content container
        cycleback: false, // allows for cycling back through images
        autoplay: false, // automatically cycle through the slides in the carousel
        pauseTime: 10 // to be used in conjunction with autoplay - sets the pause time inbetween each slide
    };

    // Variable declarations
    var controls = {};

    // Checks for userControls
    if (typeof userControls !== "undefined") {
        controls = $.extend({}, defControls, userControls);
    } else {
        controls = defControls;
    }

    var contentType = $(controls.content);
    var $el = $("#showcase");
    var $leftArrow = "#left_arrow";
    var $rightArrow = "#right_arrow";
    var $load = $el.find(contentType)[0];
    var slideCount = $el.children().length;
    var slideContent = $el.children();
    var slideNum = 1;
    var counter = $(".active").index();

    // Checks if the content in the carousel is an img and then determines the width of the container based on the size of the content
    if (controls.content === "img") {
        controls.containerWidth = $(".slide").width();
    }

    // Preloads carousel with correct settings
    $el.css("width", controls.containerWidth);
    $el.find(contentType)[0].setAttribute("class", "active");

    // Checks to see if the setting for carousel controls are set to show on the page
    if (controls.showControls === true) {
        $(
            '<div id="controls"><a href="#" id="' +
                $leftArrow.replace("#", "") +
                '">' +
                controls.prevText +
                '</a> <a href="#" id="' +
                $rightArrow.replace("#", "") +
                '">' +
                controls.nextText +
                "</a></div>"
        ).insertAfter("#showcase");
        $("#controls").find("#left_arrow").addClass("disabled");
    }

    // Checks to see if the setting for cycleback is enabled
    if (controls.cycleback === true) {
        $("#controls").find("#left_arrow").removeClass("disabled");
    }

    // Checks to see if the setting for autoplay is enabled
    if (controls.autoplay === true) {
        $("#controls").find("#left_arrow").removeClass("disabled");
        controls.cycleback = true;
        var interval;
        var timer = function() {
            interval = setInterval(function() {
                $("#right_arrow").click();
            }, controls.pauseTime * 1000);
        };
        timer();
    }

    // Logic for the carousel effects
    function effects(action) {
        switch (controls.effect) {
            // Fade effect
            case "fade":
                if (controls.content == "img") {
                    $el.css("background", "#000");
                }

                $(".slide").stop().animate({ opacity: 0 }, controls.effectDuration * 300, function() {
                    $(".active").stop().animate({ opacity: 1 }, controls.effectDuration * 1000);
                });
                break;

            // Slide effect
            case "slide":
                if (action == "prev") {
                    $(".slide").css("left", -controls.containerWidth);
                    $(".slide")
                        .stop()
                        .animate({ left: -controls.containerWidth }, controls.effectDuration * 800,
                            function() {
                                $(".active").stop().animate({ left: 0 }, controls.effectDuration * 1000);
                            }
                        );
                } else if (action == "next") {
                    $(".slide").css("left", controls.containerWidth);
                    $(".slide")
                        .stop()
                        .animate({ left: controls.containerWidth }, controls.effectDuration * 800,
                            function() {
                                $(".active").stop().animate({ left: 0 }, controls.effectDuration * 1000);
                            }
                        );
                }
                break;

            case "verticalSlide":
                if (action == "prev") {
                    $(".slide").css("top", -controls.containerWidth);
                    $(".slide")
                        .stop()
                        .animate({ top: -controls.containerWidth }, controls.effectDuration * 800,
                            function() {
                                $(".active").stop().animate({ top: 0 }, controls.effectDuration * 1000);
                            }
                        );
                } else if (action == "next") {
                    $(".slide").css("top", controls.containerWidth);
                    $(".slide").stop().animate({ top: controls.containerWidth }, controls.effectDuration * 800,
                            function() {
                                $(".active").stop().animate({ top: 0 }, controls.effectDuration * 1000);
                            }
                        );
                }
                break;

            // Sliding fade effect
            case "slidingFade":
                if (action == "prev") {
                    $(".slide").css("left", -controls.containerWidth);
                    $(".slide").stop().animate({ left: -controls.containerWidth, opacity: 0 }, controls.effectDuration * 1400,
                            function() {
                                $(".active").stop().animate({ left: 0, opacity: 1 }, controls.effectDuration * 1200);
                            }
                        );
                } else if (action == "next") {
                    $(".slide").css("left", controls.containerWidth);
                    $(".slide").stop().animate({ left: controls.containerWidth, opacity: 0 }, controls.effectDuration * 1400,
                            function() {
                                $(".active").stop().animate({ left: 0, opacity: 1 }, controls.effectDuration * 1200);
                            });
                }
                break;

            // Default effect
            case "default":
                break;
        }
    }

    // Checks for the first and last index in the carousel
    function checkSlide() {
        if (controls.cycleback === false) {
            if (slideNum == 1) {
                $($leftArrow).addClass("disabled");
            } else {
                $($leftArrow).removeClass("disabled");
            }

            if (slideNum == slideCount) {
                $($rightArrow).addClass("disabled");
            } else {
                $($rightArrow).removeClass("disabled");
            }
        } else {
            $($leftArrow).removeClass("disabled");
            $($rightArrow).removeClass("disabled");
        }
    }

    // Navigational logic for the previous/next buttons
    $(document).on("click", $leftArrow, function(e) {
        if (controls.cycleback === false) {
            if (slideNum > 1) {
                counter--;
                $(".active").addClass("slide");
                $(".active").removeClass("active");
console.log(counter);
                // Sends the effect value to the switch
                effects("prev");
console.log(counter);
                $el.find(contentType).eq(counter).addClass("active");
                slideNum--;

                // Checks the current slide index
                checkSlide();
            }
            e.preventDefault();
        } else {
            if (slideNum > 1) {
                counter--;
                $(".active").addClass("slide");
                $(".active").removeClass("active");

                // Sends the effect value to the switch
                effects("prev");
console.log(counter);
                $el.find(contentType).eq(counter).addClass("active");
                slideNum--;

                // Checks the current slide index
                checkSlide();

                // Resets the autoplay timer if previous is clicked
                if (controls.autoplay === true) {
                    clearInterval(interval);
                    timer();
                }
            } else {
                counter = $(".active").index() + (slideNum - 1);
                $(".active").addClass("slide");
                $(".active").removeClass("active");

                // Sends the effect value to the switch
                effects("next");
console.log(counter);
                $el.find(contentType).eq(counter).addClass("active");
                slideNum++;

                // Checks the current slide index
                checkSlide();

                // Resets the autoplay timer if previous is clicked
                if (controls.autoplay === true) {
                    clearInterval(interval);
                    timer();
                }
            }
            e.preventDefault();
        }
    });

    $(document).on("click", $rightArrow, function(e) {
        if (controls.cycleback === false) {
            if (slideNum < slideCount) {
                counter++;
                $(".active").addClass("slide");
                $(".active").removeClass("active");
console.log(counter);
                // Sends the effect value to the switch
                effects("next");
console.log(counter);
                $el.find(contentType).eq(counter).addClass("active");
                slideNum++;

                // Checks the current slide index
                checkSlide();
            }
            e.preventDefault();
        } else {
            if (slideNum < slideCount) {
                counter++;
                $(".active").addClass("slide");
                $(".active").removeClass("active");

                // Sends the effect value to the switch
                effects("next");
console.log(counter);
                $el.find(contentType).eq(counter).addClass("active");
                slideNum++;

                // Checks the current slide index
                checkSlide();

                // Resets the autoplay timer if previous is clicked
                if (controls.autoplay === true) {
                    clearInterval(interval);
                    timer();
                }
            } else {
                counter = $(".active").index() - (slideCount - 1);
                $(".active").addClass("slide");
                $(".active").removeClass("active");

                // Sends the effect value to the switch
                effects("next");
console.log(counter);
                $el.find(contentType).eq(counter).addClass("active");
                slideNum++;

                // Checks the current slide index
                checkSlide();

                // Resets the autoplay timer if previous is clicked
                if (controls.autoplay === true) {
                    clearInterval(interval);
                    timer();
                }
            }
            e.preventDefault();
        }
    });
});

* {
	margin: 0px;
	padding: 0px;
}

#showcase {
	overflow: hidden;
	position: relative;
	background: green;
}

.disabled {
	color: red !important;
}

.slide {
	display: none;
	opacity: 0;
	position: relative;
}

.active {
	display: block;
	opacity: 1;
	position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354/?image=306" />
	<img class="slide" src="https://picsum.photos/458/354/?image=626" />
	<img class="slide" src="https://picsum.photos/458/354/?image=806" />
	<!-- <div class="slide">content 1</div>
	<div class="slide">content 2</div>
	<div class="slide">content 3</div> -->
</div>

<script>
userControls = {
	effectDuration : .5,
	cycleback : true
}
</script>

Answer 1

Проблема с вашим счетчиком в том, что он не может работать для нескольких кликов в любом заданном направлении.

eq(n) - это проблема, по которой вы получаете пустое изображение.Большие индексы (index > slideCount or index < -1 * slideCount) заставляют его выходить за пределы.Единственная причина, по которой eq(n) работал с отрицательными числами, потому что он использовал длину массива слайдов в качестве смещения.

Я исправил так, что slideNum будет сброшен, когда вы достигнете 0 или slideCount и вернетесь назад.

<script>
    $(function () {
        // Default controls
        var defControls = {
            content: "img", // accepts any DOM element - div, img, table, etc...
            showControls: true, // true/false shows/hides the carousel's navigational controls
            effect: "default", // supports default, fade, slide, verticalSlide, slidingFade
            effectDuration: 0.25, // to be used in conjunction with effect - adjust the time of the effect measured in seconds
            prevText: "&laquo; Previous", // previous button text
            nextText: "Next &raquo;", // next button text
            containerWidth: 600, // determines the width of the content container
            cycleback: false, // allows for cycling back through images
            autoplay: false, // automatically cycle through the slides in the carousel
            pauseTime: 10 // to be used in conjunction with autoplay - sets the pause time inbetween each slide
        };

        // Variable declarations
        var controls = {};

        // Checks for userControls
        if (typeof userControls !== "undefined") {
            controls = $.extend({}, defControls, userControls);
        } else {
            controls = defControls;
        }

        var contentType = $(controls.content);
        var $el = $("#showcase");
        var $leftArrow = "#left_arrow";
        var $rightArrow = "#right_arrow";
        var $load = $el.find(contentType)[0];
        var slideCount = $el.children().length;
        var slideContent = $el.children();
        var slideNum = 1;
        var counter = $(".active").index();

        // Checks if the content in the carousel is an img and then determines the width of the container based on the size of the content
        if (controls.content === "img") {
            controls.containerWidth = $(".slide").width();
        }

        // Preloads carousel with correct settings
        $el.css("width", controls.containerWidth);
        $el.find(contentType)[0].setAttribute("class", "active");

        // Checks to see if the setting for carousel controls are set to show on the page
        if (controls.showControls === true) {
            $(
                '<div id="controls"><a href="#" id="' +
                $leftArrow.replace("#", "") +
                '">' +
                controls.prevText +
                '</a> <a href="#" id="' +
                $rightArrow.replace("#", "") +
                '">' +
                controls.nextText +
                "</a></div>"
            ).insertAfter("#showcase");
            $("#controls").find("#left_arrow").addClass("disabled");
        }

        // Checks to see if the setting for cycleback is enabled
        if (controls.cycleback === true) {
            $("#controls").find("#left_arrow").removeClass("disabled");
        }

        // Checks to see if the setting for autoplay is enabled
        if (controls.autoplay === true) {
            $("#controls").find("#left_arrow").removeClass("disabled");
            controls.cycleback = true;
            var interval;
            var timer = function () {
                interval = setInterval(function () {
                    $("#right_arrow").click();
                }, controls.pauseTime * 1000);
            };
            timer();
        }

        // Logic for the carousel effects
        function effects(action) {
            switch (controls.effect) {
                // Fade effect
                case "fade":
                    if (controls.content == "img") {
                        $el.css("background", "#000");
                    }

                    $(".slide").stop().animate({
                        opacity: 0
                    }, controls.effectDuration * 300, function () {
                        $(".active").stop().animate({
                            opacity: 1
                        }, controls.effectDuration * 1000);
                    });
                    break;

                    // Slide effect
                case "slide":
                    if (action == "prev") {
                        $(".slide").css("left", -controls.containerWidth);
                        $(".slide")
                            .stop()
                            .animate({
                                    left: -controls.containerWidth
                                }, controls.effectDuration * 800,
                                function () {
                                    $(".active").stop().animate({
                                        left: 0
                                    }, controls.effectDuration * 1000);
                                }
                            );
                    } else if (action == "next") {
                        $(".slide").css("left", controls.containerWidth);
                        $(".slide")
                            .stop()
                            .animate({
                                    left: controls.containerWidth
                                }, controls.effectDuration * 800,
                                function () {
                                    $(".active").stop().animate({
                                        left: 0
                                    }, controls.effectDuration * 1000);
                                }
                            );
                    }
                    break;

                case "verticalSlide":
                    if (action == "prev") {
                        $(".slide").css("top", -controls.containerWidth);
                        $(".slide")
                            .stop()
                            .animate({
                                    top: -controls.containerWidth
                                }, controls.effectDuration * 800,
                                function () {
                                    $(".active").stop().animate({
                                        top: 0
                                    }, controls.effectDuration * 1000);
                                }
                            );
                    } else if (action == "next") {
                        $(".slide").css("top", controls.containerWidth);
                        $(".slide").stop().animate({
                                top: controls.containerWidth
                            }, controls.effectDuration * 800,
                            function () {
                                $(".active").stop().animate({
                                    top: 0
                                }, controls.effectDuration * 1000);
                            }
                        );
                    }
                    break;

                    // Sliding fade effect
                case "slidingFade":
                    if (action == "prev") {
                        $(".slide").css("left", -controls.containerWidth);
                        $(".slide").stop().animate({
                                left: -controls.containerWidth,
                                opacity: 0
                            }, controls.effectDuration * 1400,
                            function () {
                                $(".active").stop().animate({
                                    left: 0,
                                    opacity: 1
                                }, controls.effectDuration * 1200);
                            }
                        );
                    } else if (action == "next") {
                        $(".slide").css("left", controls.containerWidth);
                        $(".slide").stop().animate({
                                left: controls.containerWidth,
                                opacity: 0
                            }, controls.effectDuration * 1400,
                            function () {
                                $(".active").stop().animate({
                                    left: 0,
                                    opacity: 1
                                }, controls.effectDuration * 1200);
                            });
                    }
                    break;

                    // Default effect
                case "default":
                    break;
            }
        }

        // Checks for the first and last index in the carousel
        function checkSlide() {
            if (controls.cycleback === false) {
                if (slideNum == 1) {
                    $($leftArrow).addClass("disabled");
                } else {
                    $($leftArrow).removeClass("disabled");
                }

                if (slideNum == slideCount) {
                    $($rightArrow).addClass("disabled");
                } else {
                    $($rightArrow).removeClass("disabled");
                }
            } else {
                $($leftArrow).removeClass("disabled");
                $($rightArrow).removeClass("disabled");
            }
        }

        // Navigational logic for the previous/next buttons
        $(document).on("click", $leftArrow, function (e) {
            if (controls.cycleback === false) {
                if (slideNum > 1) {
                    $(".active").addClass("slide");
                    $(".active").removeClass("active");

                    slideNum--;
                    if (slideNum == -1) {
                        slideNum = slideCount;
                    }
                    counter = slideNum - 1;
                    console.log(counter);
                    // Sends the effect value to the switch
                    effects("prev");
                    console.log(counter);
                    $el.find(contentType).eq(counter).addClass("active");

                    // Checks the current slide index
                    checkSlide();
                }
                e.preventDefault();
            } else {

                slideNum--;
                if (slideNum == -1) {
                    slideNum = slideCount - 1;
                }
                counter = slideNum - 1;
                if (counter < 0) {
                    counter = counter + slideCount;
                }

                effects("prev");
                $(".active").addClass("slide");
                $(".active").removeClass("active");
                console.log(counter);
                $el.find(contentType).eq(counter).addClass("active");

                // Checks the current slide index
                checkSlide();

                // Resets the autoplay timer if previous is clicked
                if (controls.autoplay === true) {
                    clearInterval(interval);
                    timer();
                }

                e.preventDefault();
            }
        });

        $(document).on("click", $rightArrow, function (e) {
            if (controls.cycleback === false) {
                if (slideNum < slideCount) {
                    counter = slideNum;
                    $(".active").addClass("slide");
                    $(".active").removeClass("active");
                    console.log(counter);
                    // Sends the effect value to the switch
                    effects("next");
                    console.log(counter);
                    $el.find(contentType).eq(counter).addClass("active");

                    if (slideNum < slideCount) {
                        slideNum++;
                    }

                    // Checks the current slide index
                    checkSlide();
                }
                e.preventDefault();
            } else {
                if (slideNum < slideCount) {
                    counter = slideNum;
                    $(".active").addClass("slide");
                    $(".active").removeClass("active");

                    // Sends the effect value to the switch
                    effects("next");
                    console.log(counter);
                    $el.find(contentType).eq(counter).addClass("active");
                    slideNum++;

                    if (slideNum == slideCount) {
                        slideNum = 0;
                    } else if (slideNum < 0) {
                        slideNum = slideCount + slideNum;
                    }

                    // Checks the current slide index
                    checkSlide();

                    // Resets the autoplay timer if previous is clicked
                    if (controls.autoplay === true) {
                        clearInterval(interval);
                        timer();
                    }
                } else {
                    counter = (slideCount - slideNum);
                    $(".active").addClass("slide");
                    $(".active").removeClass("active");

                    // Sends the effect value to the switch
                    effects("next");
                    console.log(counter);
                    $el.find(contentType).eq(counter).addClass("active");
                    slideNum++;

                    if (slideNum == slideCount) {
                        slideNum = 0;
                    } else if (slideNum < 0) {
                        slideNum = slideCount + slideNum;
                    }

                    // Checks the current slide index
                    checkSlide();

                    // Resets the autoplay timer if previous is clicked
                    if (controls.autoplay === true) {
                        clearInterval(interval);
                        timer();
                    }
                }
                e.preventDefault();
            }
        });
    });
</script>