инициализация нескольких одинаковых Swiper слайдеров
Подскажите, пожалуйста, нужно инициализировать некоторое количество адаптивных слайдеров Swiper на странице (инициализируется при ширине экрана < 600px), но второй слайдер не инициализируется. Я так понимаю, что инициализацию нужно поместить в forEach? Но самостоятельно пока решить проблему не удалось, буду благодарен любому ответу
const slider = document.querySelector('.slider-container');
let mySwiper;
function mobileSlider() {
if (window.innerWidth <= 600 && slider.dataset.mobile == 'false') {
mySwiper = new Swiper(slider, {
slidesPerView: 1,
spaceBetween: 10,
loop: true,
slideClass: 'card',
});
slider.dataset.mobile = 'true';
}
if (window.innerWidth > 600) {
slider.dataset.mobile = 'false';
if (slider.classList.contains('swiper-container-initialized')) {
mySwiper.destroy();
}
}
}
mobileSlider()
window.addEventListener('resize', () => {
mobileSlider();
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
body {
background-color: #111;
font-family: 'Roboto', sans-serif;
color: #fff;
padding: 150px 0;
}
.card {
padding: 30px;
background-color: LawnGreen;
min-height: 300px;
color: #111;
font-size: 16px;
}
.slider-container {
max-width: 1200px;
padding: 0 15px;
position: relative;
margin: 0 auto 100px;
}
.swiper-button-prev,
.swiper-button-next {
background-color: #fff;
width: 40px;
height: 40px;
border-radius: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 20px 20px;
}
.slider-buttons {
display: flex;
align-items: center;
}
/* swiper-bullets styling */
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin: 0 15px;
background-color: tomato;
opacity: 1;
}
.swiper-pagination-bullet-active {
background-color: navy;
}
.swiper-button-prev,
.swiper-button-next {
position: static;
margin-left: 10px;
}
.swiper-container {
padding-bottom: 50px;
}
.slider-container {
overflow: hidden;
width: 100%;
}
.slider-container .swiper-wrapper {
justify-content: space-between;
flex-wrap: wrap;
}
.card {
width: 20%;
margin-right: 2.5%;
margin-bottom: 2.5%;
}
@media (max-width: 600px) {
.card {
width: 100%;
margin: 0;
flex-shrink: 0;
}
.slider-container .swiper-wrapper {
justify-content: initial;
flex-wrap: nowrap;
}
}
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<div class="slider-container" data-mobile="false">
<div class="swiper-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<div class="slider-container" data-mobile="false">
<div class="swiper-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
const sliders = document.querySelectorAll('.collage-swiper').forEach(slider => {
let mySwiper;
function mobileSlider() {
if (window.innerWidth <= 600 && slider.dataset.mobile == 'false') {
mySwiper = new Swiper(slider, {
slidesPerView: 1,
spaceBetween: 20,
// loop: false,
});
slider.dataset.mobile = 'true';
}
if (window.innerWidth > 600) {
slider.dataset.mobile = 'false';
if (slider.classList.contains('swiper-initialized')) {
mySwiper.destroy();
}
}
}
mobileSlider()
window.addEventListener('resize', () => {
mobileSlider();
});
});
Ответы (2 шт):
Сделал пример с функциями и добавил в начале код из MDN по оптимизации события ресайза, подробнее
Проверки в коде по типу if (slider.swiper)это взял с документации, при инициализации свайпера можно обратится к слайдеру через его HTML элемент (контейнер) соответственно если можно обратится - значит слайдер инициирован.
/* Часть для оптимизации события resize взят с примера MDN https://developer.mozilla.org/ru/docs/Web/API/Window/resize_event#requestanimationframe_customevent
*/
(function() {
var throttle = function(type, name, obj) {
obj = obj || window;
var running = false;
var func = function() {
if (running) {
return;
}
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle("resize", "optimizedResize");
})();
// Дальше код относящийся к вопросу
const sliders = document.querySelectorAll('.slider-container');
let mySwipers = [] // Масив со слайдерами
function sliderinit() {
// Создаем все слайдеры
sliders.forEach((slider, index) => {
console.log(slider)
if (!slider.swiper) {
mySwipers[index] = new Swiper(slider, {
slidesPerView: 1,
spaceBetween: 10,
loop: true,
slideClass: 'card',
})
} else {
return
}
})
}
function sliderDestroy() {
// удаляем все слайдеры
sliders.forEach((slider, index) => {
if (slider.swiper) mySwipers[index].destroy(true, true)
})
}
function checker() {
// >600 удаялем, в другом случа инициализируем, если до этого не инициализировали
if (window.matchMedia("(min-width: 600px)").matches) {
// >600 удаляем слайдеры если такие есть
sliderDestroy()
} else {
sliderinit()
}
}
checker();
window.addEventListener('optimizedResize', () => {
checker();
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
body {
background-color: #111;
font-family: 'Roboto', sans-serif;
color: #fff;
padding: 150px 0;
}
.card {
padding: 30px;
background-color: LawnGreen;
min-height: 300px;
color: #111;
font-size: 16px;
}
.slider-container {
max-width: 1200px;
padding: 0 15px;
position: relative;
margin: 0 auto 100px;
}
.swiper-button-prev,
.swiper-button-next {
background-color: #fff;
width: 40px;
height: 40px;
border-radius: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 20px 20px;
}
.slider-buttons {
display: flex;
align-items: center;
}
/* swiper-bullets styling */
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin: 0 15px;
background-color: tomato;
opacity: 1;
}
.swiper-pagination-bullet-active {
background-color: navy;
}
.swiper-button-prev,
.swiper-button-next {
position: static;
margin-left: 10px;
}
.swiper-container {
padding-bottom: 50px;
}
.slider-container {
overflow: hidden;
width: 100%;
}
.slider-container .swiper-wrapper {
justify-content: space-between;
flex-wrap: wrap;
}
.card {
width: 20%;
margin-right: 2.5%;
margin-bottom: 2.5%;
}
@media (max-width: 600px) {
.card {
width: 100%;
margin: 0;
flex-shrink: 0;
}
.slider-container .swiper-wrapper {
justify-content: initial;
flex-wrap: nowrap;
}
}
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<div class="slider-container" data-mobile="false">
<div class="swiper-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<div class="slider-container" data-mobile="false">
<div class="swiper-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Добавьте slider-container еще один класс типа slider-container1 и инициализируйте по нему.