Почему Swiper 5.0.3 меняет местами брейкпоинты?

Question

[dicem]

Использую 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
						}
					},
}

Comments

[skolzage]

это логика мобайл фест, брекпоинты ставятся не на уменьшение размера экрана, а на увеличение. То есть 1000 px, значит что значения применятся для того что выше этого, а не наоборот. Поэтому строить нужно от минимального к максимальному.

[dicem]

skolzage, ля серьезно? Сраные хипстеры на программистах, при мне такой хуйни не было, напридумают свои принципы в принципе, а мне потом еще догадываться что это фича.

Answer 1

[dicem]

Вопрос ошибки состоял в том, что scrollbar не отрабатывал корректно свойство draggable, решил очень просто, просто отключил draggable и пролистывание слайдов во freeMode инвертировал, отличный костыль, который работает.
Ошибку с инверсией брейкпоинтов решил, просто понижением версии до 4.*.*

P.S.
Это была последняя капля, никогда больше этот Swiper никому не посоветую и сам пользовать перестану.