Блог

Главная - Вопросы по программированию - Изменение нумерации страниц Swiper в зависимости от медиа-запроса

Изменение нумерации страниц Swiper в зависимости от медиа-запроса

#javascript #html #swiper

#javascript #HTML #swiper.js

Вопрос:

Вот в чем проблема. Я использую swiper. Мне нужна разбивка на страницы в строке прогресса для мобильных медиа-запросов и разбивка на маркеры для мультимедийных запросов планшетов и настольных компьютеров. Точки останова работают, но если медиа-запрос изменяется динамически, разбивка на страницы работает некорректно. Вам необходимо обновить страницу. Мне сказали, что я должен использовать slider.update() с помощью breakpointchecker. Но это не работает. Возможно, я использовал его неправильно. Как я должен использовать swiper.update в этой ситуации? Вот мой код ниже:

 import {swiper} from '../vendor/swiper';

const breakpointSm = window.matchMedia('(max-width: 767px)');

const clientsSlider = () => {
  const clientsSliderElem = document.querySelectorAll('.clients-slider__list');

  if (!clientsSliderElem) {
    return;
  }
 
  const clientsSliderSettings = {
    autoheight: false,

    pagination: {
      el: '.clients-slider__pagination',
      type: 'bullets',
      clickable: true,
    },
    navigation: {
      nextEl: '.slider-controls-btn--next',
      prevEl: '.slider-controls-btn--prev',
      disabledClass: 'slider-controls-btn--disabled',
    },

    breakpoints: {
      1368: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerColumnFill: 'row',
        slidesPerGroup: 4,
      },
      1023: {
        slidesPerView: 3,
        slidesPerColumn: 2,
        slidesPerGroup: 3,
      },
      768: {
        slidesPerView: 2,
        slidesPerColumn: 2,
        slidesPerGroup: 2,
      },
      320: {
        slidesPerView: 2,
        slidesPerColumn: 2,
        pagination: {
          el: '.clients-slider__pagination',
          progressbarFillClass: 'clients-slider__progressbar',
          type: 'progressbar',
        },
      },
    },

 
    slideClass: 'clients-slider__item',
    slideActiveClass: 'clients-slider__item--active',
    slideNextClass: 'clients-slider__item--next',
    slidePrevClass: 'clients-slider__item--prev',
    slideVisibleClass: 'clients-slider__item--visible',
    wrapperClass: 'clients-slider__wrap',
  };


  clientsSliderElem.forEach((slider) => {
    const mySwiper = new Swiper(slider, clientsSliderSettings);

    const breakpointChecker = () => {
      if (breakpointSm.matches) {
        mySwiper.update();
      }
    };

    breakpointSm.addListener(breakpointChecker);

    breakpointChecker();
  });
};


export {clientsSlider};
Метки: