Не получается подключить swiper через webpack?

Question

[lilici]

здравствуйте! я новичок во фронте, не могу разобраться, почему при подключении swiper через webpack он не виден на странице сайта. Сборка идет без ошибок

js:

import '../scss/style.scss';
import Swiper, { Pagination } from 'swiper';
import 'C:/Users/DELL1/Desktop/maket4/webpack-static-template/node_modules/swiper/modules/pagination/pagination.scss';
import 'C:/Users/DELL1/Desktop/maket4/webpack-static-template/node_modules/swiper/modules/pagination/pagination.js';

new Swiper('.brand_swiper', {
  modules: [Pagination],
  loop: true,
  spaceBetween: 16,
  slidesClass: 'brand_swiper-slide',
  pagination: {
    el: '.brand_swiper-pagination',
    tupe: 'bullets',
    clickable: true
  },
  slidesPerView: 'auto'
  })

html:

<div class="brand_swiper">
            <div class="brand_swiper-wrapper">
                  <div class="brand_swiper-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 class="brand_swiper-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 class="brand_swiper-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 class="brand_swiper-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 class="brand_swiper-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 class="brand_swiper-slide hide-m">
                    <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 class="brand_swiper-slide hide-m">
                    <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 class="brand_swiper-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
                    <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 class="brand_swiper-slide">
                  </div>
                  <div class="brand_swiper-slide hide-s">
                    <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 class="brand_swiper-slide hide-s">
                    <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 class="brand_swiper-pagination"></div>
            </div>
          </div>

scss:

.brand_swiper-wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-left: 16px;
  margin-bottom: 24px;
}
.brand_swiper-slide {
  width: 220px;
  height: 72px;
  border-radius: 6px;
  border: 1px solid #EAEAEA;
  background-color: white;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 16px 0 16px;
}
.brand_slider-button {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 20px;
  border: 2px solid #ff3e79;
  padding-top: 4px;
  padding-left: 8px;
}
.brand_slider-button:hover {
  cursor: pointer;
}
.arrow {
  width: 8px;
  height: 12px;
}
.brand_swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

Answer 1

[Сергей delphinpro]

Опечатка в названии параметра https://swiperjs.com/swiper-api#param-slideClass

Comments

[lilici]

изменил brand_swiper-wrapper на swiper-wrapper, brand_swiper-slide на swiper-slide, slidesClass на slideClass, в html появился , но не работает, и пагинации нет

[Сергей delphinpro]

lilici, https://swiperjs.com/get-started
ну начните с пошаговой инструкции прямо с сайта. а потом добавляйте свои стили.
как минимум я не вижу у вас подключения стилей

// import Swiper and modules styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

[lilici]

Сергей delphinpro, стили swiper у меня находятся в node_modules/swiper/modules/pagination/pagination.scss, подключал их через

import 'C:/Users/DELL1/Desktop/maket4/webpack-static-template/node_modules/swiper/modules/pagination/pagination.scss';

а сам swiper через import Swiper, { Pagination } from 'swiper';
при варианте подключений с сайта в сборке дает ошибку

[Сергей delphinpro]

lilici,

import 'swiper/modules/pagination/pagination.scss';

не нужно полные пути писать. На другом компе это не соберётся

[lilici]

Сергей delphinpro, спасибо большое, заработало