Как можно кастомизировать swiper-slider?

Question

Я подключил слайдер swiper с помощью vue и теперь не пойму как его можно кастомизировать под свои нужды. Я хотел уменьшить ширину и добавить кнопки влево и вправо на слайд. Пробовал прописать в css,но как то не получилось.

.swiper.swiper-container{
    width: 300px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>
<swiper-container >
  <swiper-slide><img src="https://thumb.tildacdn.com/tild3032-3034-4731-b437-323162363065/-/cover/560x400/center/center/-/format/webp/SKALA-ARMCHAIR-March.jpg"></swiper-slide>
  <swiper-slide><img src="https://static.tildacdn.com/tild3535-6661-4565-b661-626465626632/SKALA-ARMCHAIR-March.jpg"></swiper-slide></swiper-slide>
</swiper-container>

Буду рад любой помощи!

Answer 1

let swiper = new Swiper(".swiper", {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

.swiper {
  width: 300px;
  height: 300px;
}

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img
                src="https://thumb.tildacdn.com/tild3032-3034-4731-b437-323162363065/-/cover/560x400/center/center/-/format/webp/SKALA-ARMCHAIR-March.jpg">
        </div>
        <div class="swiper-slide">
            <img
                src="https://static.tildacdn.com/tild3535-6661-4565-b661-626465626632/SKALA-ARMCHAIR-March.jpg">
        </div>
    </div>

    <!-- Кнопки влево и вправо на слайд -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

БЛОГ НА HUSL

Как можно кастомизировать swiper-slider?

Ответы (1 шт):