Использую Swiper 5.0.3.
Инициализация проходит в следующем формате:
HTML
<div class="good_slider">
<div class="swiper-container good-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card_box">
<div class="card_photo">
<img src="../assets/img/photos/goods/verelly.jpg" alt="">
<div class="card_photo_offer_group">
<div class="card_photo_offer card_photo_offer--hit">
<span>Похожие кухни</span>
</div>
</div>
<div class="card_photo_rating">
<span>57</span>
</div>
</div>
<div class="card_info">
<p class="card_info_title">Кухня "Верелли"</p>
<div class="card_info_simple">
<div class="card_info_attr">
<div class="card_info_attr_material">
<img src="../assets/img/icons/green/material/shpon.svg" alt="">
<p>Шпон</p>
</div>
<div class="card_info_attr_price">
<p>от <strong>65 000</strong> руб</p>
</div>
</div>
<div class="card_info_submit_group">
<a href="#" class="btn btn-primary">
Рассчитать
</a>
<a href="" class="btn btn-warning">
Подробнее
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card_box">
<div class="card_photo">
<img src="../assets/img/photos/goods/prime.jpg" alt="">
<div class="card_photo_offer_group">
<div class="card_photo_offer card_photo_offer--benefit">
<span>Выгодная покупка</span>
</div>
</div>
<div class="card_photo_rating">
<span>57</span>
</div>
</div>
<div class="card_info">
<p class="card_info_title">Кухня "Прайм"</p>
<div class="card_info_simple">
<div class="card_info_attr">
<div class="card_info_attr_material">
<img src="../assets/img/icons/green/material/shpon.svg" alt="">
<p>Массив</p>
</div>
<div class="card_info_attr_price">
<p>от <strong>70 000</strong> руб</p>
</div>
</div>
<div class="card_info_submit_group">
<a href="#" class="btn btn-primary">
Рассчитать
</a>
<a href="" class="btn btn-warning">
Подробнее
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card_box">
<div class="card_photo">
<img src="../assets/img/photos/goods/shaker.jpg" alt="">
<div class="card_photo_offer_group">
<div class="card_photo_offer card_photo_offer--price">
<span>Лучшая цена</span>
</div>
</div>
<div class="card_photo_rating">
<span>57</span>
</div>
</div>
<div class="card_info">
<p class="card_info_title">Кухня "Шейкер"</p>
<div class="card_info_simple">
<div class="card_info_attr">
<div class="card_info_attr_material">
<img src="../assets/img/icons/green/material/plastic.svg" alt="">
<p>Пластик</p>
</div>
<div class="card_info_attr_price">
<p>от <strong>45 000</strong> руб</p>
</div>
</div>
<div class="card_info_submit_group">
<a href="#" class="btn btn-primary">
Рассчитать
</a>
<a href="" class="btn btn-warning">
Подробнее
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="good_slider_nav good_slider_nav--prev"></div>
<div class="good_slider_nav good_slider_nav--next"></div>
</div>
JavaScript
$('.good_slider').each( function() {
let elem = $(this).children('.swiper-container'),
self = $(this)
let swiper = new Swiper ( elem, {
slidesPerView: ( $(this).attr('data-slides') != undefined ) ? Number( $(this).attr('data-slides') ) : 3,
spaceBetween: 30,
loop: true,
navigation: {
nextEl: self.children('.good_slider_nav--next'),
prevEl: self.children('.good_slider_nav--prev')
},
breakpoints: {
992: {
slidesPerView: 2,
spaceBetween: 10,
loop:true,
navigation: false,
scrollbar: {
el: self.find('.swiper-scrollbar'),
draggable: true
}
}
}
})
})
Как видно, брейкпоинт указан на 992px, а на деле получается, что по дефолту стоят параметры на 992, А при достижении размера экрана в 992 стоят дефолтные, то есть параметры тупо поменялись местами, хотя на
демо все исправно работает.
Плюс я замечал следующее, в предыдущих версиях Swiper когда тот отрабатывал responsive, т.е. когда breakpoint's были прописаны и отрабатывались при ресайзе окна, выходила ошибка:
swiper.min.js:13 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at t.enableDraggable (swiper.min.js:13)
at t.init (swiper.min.js:13)
at t.init (swiper.min.js:13)
at swiper.min.js:13
at Array.forEach (<anonymous>)
at swiper.min.js:13
at Array.forEach (<anonymous>)
at t.l.emit (swiper.min.js:13)
at t.init (swiper.min.js:13)
at new t (swiper.min.js:13)
В новой версии она тоже выходит но опять же инвертируется, то есть выходит по дефолту, а когда ресайзишь до брейкпоинта и обновляешь страницу все ок.
P.S.
Только что обнаружил, что ошибка появляется, когда в брейкпоинтах использую scrollbar
breakpoints: {
992: {
slidesPerView: 2,
spaceBetween: 10,
loop:true,
navigation: false,
scrollbar: {
el: self.find('.swiper-scrollbar'),
draggable: true
}
},
}
