Swiperjs действия при resize
Проблема что мы при resize на 768 и меньше отключаем карусель, но при возврате на больший экран карусель уже не работает. Как я понимаю проблема кроется в этой функции mySwiper.update();
сonst slider = document.querySelector('.reviews__body');
let mySwiper = new Swiper(slider, {
observer: true,
observeParents: true,
slidesPerView: 2,
spaceBetween: 0,
speed: 800,
preloadImages: false,
lazy: {
loadPrevNext: true,
},
pagination: {
el: '.reviews-slider__dotts',
clickable: true,
},
breakpoints: {
320: false,
768: {
slidesPerView: 1.5,
spaceBetween: 20,
},
992: {
slidesPerView: 2,
spaceBetween: 0,
},
},
init: false
});
function mobileSlider() {
slider.dataset.mobile == 'false';
slider.dataset.destroy == 'false';
if (window.innerWidth >= 767 && slider.dataset.mobile != 'true') {
if(slider.dataset.destroy != 'true'){
console.log('init');
mySwiper.init();
}else{
console.log('update');
mySwiper.update();
}
slider.dataset.mobile = 'false';
}
if (window.innerWidth <= 768) {
slider.dataset.mobile = 'true';
if (slider.classList.contains('swiper-initialized')) {
console.log('destroy');
mySwiper.destroy(true, true);
slider.dataset.destroy = 'true';
}
}else{
slider.dataset.mobile = 'false';
}
}
mobileSlider();
window.addEventListener('resize', () => {
mobileSlider();
});
<section class="reviews">
<div class="container">
<div class="reviews__title main-title">reviews about us</div>
<div class="reviews__body swiper">
<div class="reviews-slider swiper-wrapper">
<div class="swiper-slide">
<div class="reviews-slider__slide">
<div class="reviews-slider__item">
<svg>
<use xlink:href="./img/sprite.svg#bg"></use>
</svg>
<div class="reviews-slider__row">
<div class="reviews-slider__user">
<div class="reviews-slider__image">
<img class="swiper-lazy" data-src="img/slider-rewiws/01.jpg" alt="">
</div>
<div class="reviews-slider__info">
<div class="reviews-slider__name">Victoria</div>
<div class="reviews-slider__work">CEO</div>
</div>
</div>
<div class="reviews-slider__content">
<div class="reviews-slider__text">“We stopped on this company, because of their CEO’s
excellent business skills, communication, professional ethics. I would recommend Alex
without hesitation to any Small Business who need help in promoting on the Internet.”
</div>
<div class="reviews-slider__icon">
<img class="swiper-lazy" data-src="img/slider-rewiws/02.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="reviews-slider__slide">
<div class="reviews-slider__item">
<svg>
<use xlink:href="./img/sprite.svg#bg"></use>
</svg>
<div class="reviews-slider__row">
<div class="reviews-slider__user">
<div class="reviews-slider__image">
<img class="swiper-lazy" data-src="img/slider-rewiws/04.jpg" alt="">
</div>
<div class="reviews-slider__info">
<div class="reviews-slider__name">Rosen</div>
<div class="reviews-slider__work">Founder</div>
</div>
</div>
<div class="reviews-slider__content">
<div class="reviews-slider__text">“Alex gave me the best possible plans and tactics on how to
develop the product message to attract the right customers. I look for the opportunity to
collaborate with him in the near future.” asd saddasd dasd
</div>
<div class="reviews-slider__icon">
<img class="swiper-lazy" data-src="img/slider-rewiws/03.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="reviews-slider__slide">
<div class="reviews-slider__item">
<svg>
<use xlink:href="./img/sprite.svg#bg"></use>
</svg>
<div class="reviews-slider__row">
<div class="reviews-slider__user">
<div class="reviews-slider__image">
<img class="swiper-lazy" data-src="img/slider-rewiws/05.jpg" alt="">
</div>
<div class="reviews-slider__info">
<div class="reviews-slider__name">Andrew</div>
<div class="reviews-slider__work">CEO in Lasers Only</div>
</div>
</div>
<div class="reviews-slider__content">
<div class="reviews-slider__text">“We stopped on this company, because of their CEO’s
excellent business skills, communication, professional ethics. I would recommend Alex
without hesitation to any Small Business who need help in promoting on the Internet.”
</div>
<div class="reviews-slider__icon">
<img class="swiper-lazy" data-src="img/slider-rewiws/03.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="reviews-slider__dotts dotts dotts_no-arrow"></div>
</div>
</div>
</section>