Стилизация пагинации и навигации в swiper

Question

Задача такая , вынести пагинацию из контейнера изменив стили цвет и размер и заменить стрелки по-умолчанию на свои. Я решил задачу только наполовину, мне удалось изменить стили элементов, но при этом они стали некликабельны и булеты остаются все еще в контейнере. Пробовал выносить их из контейнера с абсолютным позиционированием, нужно как-то переопределить дефолтный стиль контейнера owerflow:hidden;, оставив невидимыми неактивные слайды

<div class="swiper">
 <div class="swiper-wrapper">
  <div class="swiper-slide"></div>
  <div class="swiper-pagination-castom"></div>
  <div class="btn-prev ">
    <img src="/images/icons/arrow-up.svg" alt="">
  </div>
  <div class="btn-next">
    <img src="/images/icons/arrow-down.svg" alt="">
  </div>
 </div>
</div>

const swiper = new Swiper(".swiper", {

direction: 'vertical',
loop: true,
// autoplay:true,


pagination: {
    clickable: true,
    renderBullet: function (index, className) {
      return `<span class= ${className} ></span>`;
    },
  el: '.swiper-pagination-castom',

},


navigation: {
    clickable: true,
nextEl: `<div class="btn-next"><img src="/images/icons/arrow-up.svg" alt=""></div>`,
prevEl: `<div class="btn-prev "><img src="/images/icons/arrow-down.svg" alt=""></div>`,

},

});`

Answer 1

Продолжая использовать swiper, теперь поступаю так - добавляю к дефолтным классам свои классы используя какой-нибудь префикс, например так: <div class="swiper my-swiper"></div> и тогда обращаясь ко второму "кастомному" классу легко переопределить дефолтные стили слайдера

БЛОГ НА HUSL

Стилизация пагинации и навигации в swiper

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