2

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

//инициализация слайдера

let $aside__current = document.querySelector('.aside__current');
let $aside__total = document.querySelector('.aside__total');
const swiper = new Swiper('.swiper', {
  // Optional parameters
  slidesPerView: 1,
    spaceBetween: 15,
    slidesPerGroup: 1,
    observer: true,
    observeParents: true,

  // If we need pagination
  pagination: {
        el: '.aside__progressbar',
        type: 'progressbar',
        clickable: true,
    },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  breakpoints: {

        991: {
            slidesPerView: 2,
            slidesPerGroup: 2,
            spaceBetween: 30,
        },
        1400: {
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 70,
        },
    },
});


// Фильтр category__items

const itemList = document.querySelectorAll('.item');
const wrapper = itemList[0].parentNode; 
    document.querySelector('.category__items').addEventListener('click', event => {
        if (event.target.tagName !== 'LI') return false;

        let filterClass = event.target.dataset['filter'];

      wrapper.innerHTML = '';
      
        itemList.forEach (elem => {
            if (elem.classList.contains(filterClass) || filterClass === 'all') {
                wrapper.appendChild(elem); 
            }
        });
    });

let mySliderAllSlides = document.querySelector('.aside__total')
let mySliderCurrentSlide = document.querySelector('.aside__current');

    swiper.on('slideChange', function() {
        let parentWidth = $('.swiper').innerWidth();
        let slideWidth = $('.swiper-slide').innerWidth();
        let visibleSlides = Math.floor(parentWidth / slideWidth);
        let currentSlide = swiper.realIndex  + visibleSlides;
        let visibleTemplates = Math.ceil(currentSlide / visibleSlides);
        mySliderCurrentSlide.innerHTML = visibleTemplates;
        mySliderAllSlides.innerHTML = Math.ceil(swiper.slides.length / visibleSlides);

    });

<!-- begin snippet: js hide: false console: true babel: false -->
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.counter {
  width: 50px;
  height: 50px;
  position: fixed;
  left: 10px;
  top: 10px;
  font-size: 50px;
  color: red;
  z-index: 100000;
}

.category {
    display: flex;
    justify-content: center;
    width: 100%;
}

.category__items {
    display: flex;
}

.category__item {
    position: relative;
    margin: 0 32px;

    cursor: pointer;


}

.aside__counter {
  display: flex;
  width: 50px;
  height: 50px;
  position: fixed;
  left: 10px;
  top: 50px;
  font-size: 50px;
  color: red;
  z-index: 100000;
}

.green {
  background-color: green;
}

.orange {
  background-color: orange;
}

.pink {
  background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body>

  <div class="category">
      <ul class="category__items">
          <li class="category__item" data-filter="all">Все</li>
          <li class="category__item" data-filter="green">Зеленый</li>
          <li class="category__item" data-filter="orange">Оранжевый</li>
          <li class="category__item" data-filter="pink">розовый</li>
      </ul>
  </div>

  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide item green">Slide 1</div>
      <div class="swiper-slide item orange">Slide 2</div>
      <div class="swiper-slide item pink">Slide 3</div>
      <div class="swiper-slide item green">Slide 1</div>
      <div class="swiper-slide item orange">Slide 2</div>
      <div class="swiper-slide item pink">Slide 3</div>
      <div class="swiper-slide item green">Slide 4</div>
      <div class="swiper-slide item orange">Slide 5</div>
      <div class="swiper-slide item pink">Slide 6</div>
      <div class="swiper-slide item green">Slide 7</div>
      <div class="swiper-slide item orange">Slide 8</div>
      <div class="swiper-slide item pink">Slide 9</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="aside__counter">
      <div class="aside__current">1</div>
      <span>/</span>
      <div class="aside__total">5</div>
      <div class="aside__progressbar"></div>
  </div>
  </div>


  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  </body>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.