Swiper - Как да унищожите Swiper на точките на прекъсване с минимална ширина

Стиловете на Swiper са динамично вписани, докато браузърът преоразмерява или слайдовете се прекарват. API има мощен параметър за унищожаване, който отделя всички слушатели на събития и изчиства вградени стилове. Спорен е изборът на прилагане на максимална ширина с точки на въздействие с пиксели, като се има предвид, че минималната ширина с Ems / Rems е предпочитана за мобилен първи подход. Събирайки заедно Window.matchMedia () и параметъра за унищожаване, планът е да премахнете Swiper при минимална ширина: 31.25em (500px) и да преминете към мрежово оформление.

Swiper е активиран на по-малки екрани. Първата точка на прекъсване въвежда две колони и повече редове.

Както се вижда от изображението по-горе, един слайд е в центъра и два съседни слайда висят от екрана, за да насърчат потребителите да прекарват пръст наляво или надясно. С увеличаване на прозореца Swiper се унищожава и оформлението се превключва на две, три или четири колони с редове.

Прочетете предишни записи за повече контекст относно избора на дизайн и стилизиране.

  • Swiper - Uno a плъзгач на колоната Cuatro
  • Swiper - Преместване на предишни и следващи бутони

Демонстрация

Гранични

API на Swiper има параметър за точки на прекъсване. Той използва пиксели и форма на максимална ширина.

var swiper = new Swiper ('. swiper-container', {
   // Параметри по подразбиране
   слайдовеPerView: 4,
   интервал между: 40,
   // Отзивчиви точки на прекъсване
   точки на прекъсване: {
   
      // когато ширината на прозореца е <= 320px
      320: {
         слайдовеPerView: 1,
         интервал между: 10
      }
      // когато ширината на прозореца е <= 480px
      480: {
         слайдовеPerView: 2,
         интервал между: 20
      }
  
      // когато ширината на прозореца е <= 640px
      640: {
         слайдовеPerView: 3,
         интервал между: 30
      }
  
   }
})

За да премахнете всички слушатели на събития и стилове на вграждане, Swiper трябва да бъде унищожен. За да го върне, слушателят на събитие за оразмеряване ще гледа дали потребителят преоразмерява екрана. Тъй като събитието за преоразмеряване е данъчно и Swiper не използва em единици и минимална ширина, Window.matchMedia () е алтернатива.

Window.matchMedia () създава обект с няколко полезни опции. Един от тях е varia..ches. Ако страницата е заредена и минималната ширина е изпълнена, тя ще се отчита като вярна. В зависимост от начина, по който потребителят оразмерява прозореца на браузъра, той може да съобщи за вярно или невярно. Когато е вярно, Swiper ще бъде унищожен. Когато е невярно, то ще бъде създадено.

Кодът, използван, за да се случи всичко това ...

// точка на прекъсване, където плъзгачът ще бъде унищожен
// и преминава към оформление с две колони
const breakpoint = window.matchMedia ('(min-width: 31.25em)');
// проследявайте плъзгащи случаи, за да унищожите по-късно
нека mySwiper;
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
const breakpointChecker = функция () {
   // ако са необходими по-голям изглед и многоредово оформление
   ако (breakpoint.matches === true) {
      // почистване на стари екземпляри и вградени стилове, когато са налични
      ако (mySwiper! == неопределен) mySwiper.destroy (вярно, вярно);
      // или / и не прави нищо
      се върне;
   // else, ако е необходим малък прозорец за оглед и оформление на една колона
   } else if (breakpoint.matches === false) {
      // заснемане на малка версия на прозореца на swiper
      връщане enableSwiper ();
   }
};
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
const enableSwiper = функция () {
   mySwiper = нов Swiper ('.swiper-контейнер', {
      цикъл: вярно,
      slidesPerView: 'автоматично',
      centeredSlides: true,
      a11y: вярно,
      клавиатураКонтрол: вярно,
      grabCursor: вярно,
      // pagination
      pagination: '.swiper-pagination',
      paginationClickable: true,
   });
};
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
// следете промените в размера на прозореца
breakpoint.addListener (breakpointChecker);
// ритник
breakpointChecker ();

Това е! Посетете CodePen демонстрацията за котлона.

заключение

Комбинирането на параметъра за унищожаване с Window.matchMedia () е ефективен начин за управление на Swiper при различни размери на екрана. Мобилната първа е незадължителна - max-width, например, window.matchMedia ('(max-width: 31.25em)'), ще работи също толкова добре. Късмет!