Как инициализировать два независимых друг от друга слайдера swiper на одной странице?

Question

[lilici]

здравствуйте! Надо сделать на одной странице два слайдера swiper, независимых друг от друга. Инициализировал через npm в webpack. Пробовал менять переменнные в js, добавлять классы в swiper.scss и pagination.scss. Первый работает корректно, второй не подключается. Ошибок в терминал при сборке не выводит. Может не те классы менял в файлах swiper... Как правильно осуществить?

html первого:

<div class="brand-swiper">
            <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="brand-wrapper_slide">
                    <img src="img/lenovo.svg" />
                    <button tabindex="1" aria-label="Open section lenovo" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="brand-wrapper_slide">
                    <img src="img/samsung.svg" />
                    <button tabindex="2" aria-label="Open section samsung" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="brand-wrapper_slide">
                    <img src="img/apple.svg" />
                    <button tabindex="3" aria-label="Open section apple" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="brand-wrapper_slide">
                    <img src="img/bosh.svg" />
                    <button tabindex="4" aria-label="Open section bosh" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="brand-wrapper_slide">
                    <img src="img/hp.svg" />
                    <button tabindex="5" aria-label="Open section hp" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide hide-m">
                    <div class="brand-wrapper_slide">
                    <img src="img/acer.svg" />
                    <button tabindex="6" aria-label="Open section acer" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide hide-m">
                    <div class="brand-wrapper_slide">
                    <img src="img/viewsonic.svg" />
                    <button tabindex="7" aria-label="Open section viewsonic" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="brand-wrapper_slide">
                    <img src="img/sony.svg" />
                    <button tabindex="8" aria-label="Open section sony" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="brand-wrapper_slide">
                    <img src="img/lenovo.svg" />
                    <button tabindex="9" aria-label="Open section lenovo" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide hide-s">
                    <div class="brand-wrapper_slide">
                    <img src="img/samsung.svg" />
                    <button tabindex="10" aria-label="Open section samsung" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                  <div class="swiper-slide hide-s">
                    <div class="brand-wrapper_slide">
                    <img src="img/apple.svg" />
                    <button tabindex="11" aria-label="Open section apple" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
                  </div>
                  </div>
                </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>

html второго:

<div class="service-swiper">
    <div class="servie-swiper-wrapper">
          <div class="swiper-slide">
            <p>Ремонт ноутбуков</p>
            <button tabindex="12" aria-label="Open laptop repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide">
            <p>Ремонт планшетов</p>
            <button tabindex="13" aria-label="Open the tablet repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide">
            <p>Ремонт ПК</p>
            <button tabindex="14" aria-label="Open pc repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
        </div>
          <div class="swiper-slide hide-s hide-m">
            <p>Ремонт мониторов</p>
            <button tabindex="15" aria-label="Open the monitor repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide">
            <p>Ремонт ноутбуков</p>
            <button tabindex="16" aria-label="Open laptop repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide hide-m">
            <p>Ремонт планшетов</p>
            <button tabindex="17" aria-label="Open the tablet repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide hide-m">
            <p>Ремонт ПК</p>
            <button tabindex="18" aria-label="Open pc repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide">
            <p>Ремонт мониторов</p>
            <button tabindex="19" aria-label="Open the monitor repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide">
            <p>Ремонт ноутбуков</p>
            <button tabindex="20" aria-label="Open laptop repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide hide-s">
            <p>Ремонт планшетов</p>
            <button tabindex="21" aria-label="Open the tablet repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
          <div class="swiper-slide hide-s">
            <p>Ремонт ПК</p>
            <button tabindex="22" aria-label="Open pc repair section" type="button" class="service_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
          </div>
        </div>
      </div>
      <div class="service-swiper-pagination"></div>
    </div>
  </div>

js:

import '../scss/style.scss';
import Swiper, { Navigation, Pagination } from 'swiper';
import 'swiper/modules/navigation/navigation.scss';
import 'swiper/modules/pagination/pagination.scss';

  var init = false;
  function swiperCard() {
    if (window.innerWidth <= 768) {
      if (!init) {
        init = true;
        swiper = new Swiper('.brand-swiper', {
          modules: [Navigation, Pagination],
          loop: false,
          spaceBetween: 16,
          slideClass: 'swiper-slide',
          pagination: {
            el: '.swiper-pagination',
            tupe: 'bullets',
            clickable: true
          },
          slidesPerView: 'auto'
          });
      }
    } else if (init) {
      swiper.destroy();
      init = false;
    }
  }
  swiperCard();
  window.addEventListener("resize", swiperCard);

  var initService = false;
  function swiperCardService() {
    if (window.innerWidth <= 768) {
      if (!initService) {
        initService = true;
        swiperService = new Swiper('.service-swiper', {
          modules: [Navigation, Pagination],
          loop: false,
          spaceBetween: 16,
          slideClass: 'swiper-slide',
          pagination: {
            el: '.service-swiper-pagination',
            tupe: 'bullets',
            clickable: true
          },
          slidesPerView: 'auto'
          });
      }
    } else if (initService) {
      swiperService.destroy();
      initService = false;
    }
  }
  swiperCardService();
  window.addEventListener("resize", swiperCardService);