Как безболезненно перейти с slick на swiper?

Question

[oelena]

Добрый день.
Стала смотреть как использовать swiper.js и возникли вопросы.
Подключаю через cdn.

1. работает он только если вручную прописать классы в верстке? Или можно как то это обойти и использовать как в слике - свои классы?
   

   <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide">Slide 1</div>
         <div class="swiper-slide">Slide 2</div>
         <div class="swiper-slide">Slide 3</div>
         <div class="swiper-slide">Slide 4</div>
         <div class="swiper-slide">Slide 5</div>
         <div class="swiper-slide">Slide 6</div>
         <div class="swiper-slide">Slide 7</div>
         <div class="swiper-slide">Slide 8</div>
         <div class="swiper-slide">Slide 9</div>
         <div class="swiper-slide">Slide 10</div>
       </div>
       <!-- Add Pagination -->
       <div class="swiper-pagination"></div>
     </div>

   
   
2. Как правильно отключать слайдер от определенной ширины экрана? Сейчас работает так:
   

   if (window.innerWidth < 1280) {
   var swiper = new Swiper('.swiper-container', {
   slidesPerView: 1,
   spaceBetween: 10,
   // init: false,
   pagination: {
   el: '.swiper-pagination',
   clickable: true,
   },
   breakpoints: {
   	640: {
   		slidesPerView: 2,
   		spaceBetween: 20,
   	},
   	768: {
   		slidesPerView: 4,
   		spaceBetween: 40,
   	},
   	1024: {
   		slidesPerView: 5,
   		spaceBetween: 50,
   	}
   }
   });
   };

   
   И от 1280 получается стилями свайпера слайд растягивается, хотя должен быть указанной ширины и вставать по флекс сетке (мои стили подключены под стилями свайпера и тем не менее все равно во всю ширину страницы тянет).
   
   

Comments

[Ankhena]

У свайпера есть .destroy
Активация/деактивация swiper при ресайзе окна браузера?