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!