​​Один класс, но несколько слайдеров.
Заметил, что новички, да и не только, часто путаются, когда дело доходит до создания одинаковых слайдеров на станице, сегодня я покажу своё решение проблемы

Когда мы обращаемся к одному классу, то по-умолчанию swiper берет первый блок на странице, остальные слайдеры, с таким же классом начинают «ломаться», решением данной проблемы будет перебор через forEach:

let sliderCatalog = document.querySelectorAll(".catalog__block");

 sliderCatalog.forEach(element => {
      new Swiper(element.querySelector('.catalog__items'), {
      slidesPerView: 1,
      pagination: {
        el: element.querySelector('.catalog__info'),
        type: 'fraction'
      },
      });
   });

Иногда одинаковые слайдереры находятся ещё и в табах( в основном на каких-то каталогах товаров), поэтому вы можете столкнуться с проблемой, что все сделано правильно, но остальные слайдеры не работают, это связано со свойством display: none; так как значение none полностью удаляет объект со страницы, а так как стили подключаются первыми, js не успевает инициализировать слайдеры, лечиться это все следующим образом: 
Обертке задаём position: relative; а самим блокам 
&__block{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    transition: all .3s ease-in-out;
    &._active{
      opacity: 1;
      visibility: visible;
      position: static;
    }
  }
При _active все возвращаем на место и добавляем плавности. Готовый результат, а так же код прикреплю к посту