Задать вопрос
@Atheist21
swiper

Как сделать Swiper только на мобильной версии?

Проблема в том, что если загрузить сразу мобильную версию, то слайдер не инициализируется, а появляется только после ресайза, опять же стоит мобильно расширение перезагрузить - как слайдер пропадает.

При этом слайдер сам не совсем корректно работает, при прокрутке перелистывается за раз по 1,5 слайда, соответственно в конце остаются лишние индикаторы пагинации, которые потом листаются без слайдов.

const slider = document.querySelector('.swiper-container');

function mobileSlider() {
	if (window.innerWidth <= 768 && slider.dataset.mobile == 'false') {
		mySwiper = new Swiper(slider, {
			slidesPerView: 1,
			spaceBetween: 20,
			loop: true,
			slideClass: 'card',
			pagination: {
			 	el: '.swiper-pagination',
			    clickable: true,
            },
           
		});

		slider.dataset.mobile = 'true';
	}

	if (window.innerWidth > 768) {
		slider.dataset.mobile = 'false';
		if (slider.classList.contains('swiper-container-initialized')) {
			mySwiper.destroy();
		}
	}
}

mobileSlider()

window.addEventListener('resize', () => {
	mobileSlider();
});


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slidert</title>
    <link rel="stylesheet" href="css/slider/swiper.min.css">
    <link rel="stylesheet" href="css/slider/styles_slider.css">
</head>
<body>
  <header class="header">
    <h1 class="header__title">Ремонт различных брендов</h1>
  </header>
  <diV class="slider-container">
    <div class="swiper-container" data-mobile="false">
      <div class="swiper-wrapper">
        <div class="card"><a href="" class="card__link card__link--lenovo"></a></div>
        <div class="card"><a href="" class="card__link card__link--samsung"></a></div>
        <div class="card"><a href="" class="card__link card__link--apple"></a></div>
        <div class="card"><a href="" class="card__link card__link--bosch"></a></div>
        <div class="card"><a href="" class="card__link card__link--hp"></a></div>
        <div class="card"><a href="" class="card__link card__link--acer"></a></div>
        <div class="card"><a href="" class="card__link card__link--sony"></a></div>
        <div class="card"><a href="" class="card__link card__link--viewsonic"></a></div>
        <div class="card"><a href="" class="card__link card__link--lenovo"></a></div>
        <div class="card"><a href="" class="card__link card__link--samsung"></a></div>
        <div class="card"><a href="" class="card__link card__link--apple"></a></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
      
      </div><div class="change">
        <button type="button" class="change__bttn">Показать всё</button>
      </div>
    
    <script src="js/swiper.min.js"></script>
    <script src="js/slider.js"></script>
</body>
</html>
  • Вопрос задан
  • 5865 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Python-разработчик с нуля
    6 месяцев
    Далее
  • Skillfactory
    DevOps-инженер
    6 месяцев
    Далее
  • SF Education
    Бэкенд-разработчик на Python
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
@IvanZhukov
plugin-wp.ru - премиум плагины для Wordpress 
window.addEventListener('DOMContentLoaded', () => {

  const resizableSwiper = (breakpoint, swiperClass, swiperSettings, callback) => {
    let swiper;

    breakpoint = window.matchMedia(breakpoint);

    const enableSwiper = function(className, settings) {
      swiper = new Swiper(className, settings);

      if (callback) {
        callback(swiper);
      }
    }

    const checker = function() {
      if (breakpoint.matches) {
        return enableSwiper(swiperClass, swiperSettings);
      } else {
        if (swiper !== undefined) swiper.destroy(true, true);
        return;
      }
    };

    breakpoint.addEventListener('change', checker);
    checker();
  }

  const someFunc = (instance) => {
    if (instance) {
      instance.on('slideChange', function (e) {
        console.log('*** mySwiper.activeIndex', instance.activeIndex);
      });
    }
  };

  resizableSwiper(
    '(max-width: 1280px)',
    '.slider-1',
    {
      loop: true,
      spaceBetween: 32,
      slidesPerView: 1,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    },
    someFunc
  );

  resizableSwiper(
    '(max-width: 1500px)',
    '.slider-2',
    {
      loop: true,
      spaceBetween: 10,
      slidesPerView: 3,
      freeMode: true,
      breakpoints: {
        1200: {
          spaceBetween: 20,
        }
      }
    }
  );
});
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Продуктовый аналитик
Outlines Tech • Москва
До 280 000 ₽
Руководитель по развитию брокерских тарифов
Outlines Tech • Москва
До 290 000 ₽
Full-Stack Разработчик (PHP 8 / Node JS / Vue JS / PostgreSQL)
Складно
от 150 000 ₽
Ещё вакансии