Why do I get Uncaught TypeError: e.children is not iterable error when having 2 instances of swiper slider on the same page?

222 views Asked by At

I'm trying to make 2 instances of a Swiper slider, so I can have 2 kinds of sliders on the same page. A video and a review slider.

I'm encountering a warning that says "jQuery.Deferred exception: e.children is not iterable TypeError: e.children is not iterable". Immediately after that I get an error in my JavaScript code and I need help resolving it. The error message I'm getting is "Uncaught TypeError: e.children is not iterable".

The error says that my code uses the variable 'e' and tries to access its children using 'e.children'. However, Nowhere in my code do I have a variable 'e'. I don't get what the console is trying to reference.

    function calculateMoveAmount(screenWidth, move) {
        if (screenWidth > 1280) {
            // Move is an object that holds data and is used as argument in calculateMoveAmount
            return move.largeScreenMoveAmount;
        } else if (screenWidth > 768) {
            return move.mediumScreenMoveAmount;
        } else if (screenWidth > 375) {
            return move.smallScreenMoveAmount;
        } else {
            return move.extraSmallScreenMoveAmount;
        }
    }

    function initializeSwiper(swiperInstance, isNext, move) {
        var currentPosition = 0;

        swiperInstance.customSlideMove = function () {
            var moveAmount = calculateMoveAmount($(window).width(), move);

            if (isNext) {
                currentPosition -= moveAmount;
                currentPosition = Math.max(currentPosition, -((swiperInstance.slides.length - 1) * moveAmount));
            } else {
                currentPosition += moveAmount;
                currentPosition = Math.min(currentPosition, 0);
            }

            swiperInstance.wrapperEl.style.transform = 'translate3d(' + currentPosition + 'px, 0px, 0px)';
            console.log(moveAmount, currentPosition);
        };
    }

    var isVideoSwiper = $('.video__swiper');
    var videoMove = {
        largeScreenMoveAmount: 680,
        mediumScreenMoveAmount: 600,
        smallScreenMoveAmount: 520,
        extraSmallScreenMoveAmount: 300
    };
    var videoSwiper = new Swiper(isVideoSwiper, {
        spaceBetween: 20,
        direction: 'horizontal',
        loop: false,
        centeredSlides: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
        },
        on: {
            init: function () {
                initializeSwiper(this, true, videoMove);

                $('.swiper-button-next').on('click', function () {
                    videoSwiper.customSlideMove();
                });

                $('.swiper-button-prev').on('click', function () {
                    videoSwiper.customSlideMove();
                });
            }
        }
    });

    var isReviewSwiper = $('.review__swiper');
    var reviewMove = {
        largeScreenMoveAmount: 390,
        mediumScreenMoveAmount: 320,
        smallScreenMoveAmount: 240,
        extraSmallScreenMoveAmount: 220
    };
    var reviewSwiper = new Swiper(isReviewSwiper, {
        spaceBetween: 30,
        direction: 'horizontal',
        loop: false,
        centeredSlides: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
        },
        on: {
            init: function () {
                initializeSwiper(this, false, reviewMove);

                $('.swiper-button-next').on('click', function () {
                    reviewSwiper.customSlideMove();
                });

                $('.swiper-button-prev').on('click', function () {
                    reviewSwiper.customSlideMove();
                });
            }
        }
    });

I changed the classnames of the navigation and scrollbar to .review-swiper-button-next, .video-swiper-button-next, .review-swiper-button-prev, .video-swiper-button-prev, .review-swiper-scrollbar and .video-swiper-scrollbar. I saw this in another stack overflow post but this also does not work.

I tried to console.log(e.children); But it logged nothing and I'm not sure I even expected anything to happen. I checked if 'e' is a valid HTML element, which it isn't nor can it be. I can't check if it is an iterable object because it isn't anywhere in my code.

I would appreciate any insights or suggestions on how to fix this issue. Thank you!

0

There are 0 answers