Как сделать уникальные кнопки (prev, next) для каждого из 3х слайдеров Owl-carousel?

Question

[Николай Добрынин]

Для сайта нужно сделать 3 слайдера, я их подключил и кастомизировал, но загвоздкой стало то, что для каждого из них нужно сделать разные кнопки. Есть #slide-one и #slide-two, для кастомизации кнопок первого используются следующие стили

.owl-prev{
          background-image: url("../img/back.png")!important;
          background-size: cover;
          width: 46px;
          height: 46px;
              position: absolute;
    left: -100px;
    bottom: 140px;
        }


.owl-next{
          background-image: url("../img/next.png")!important;
          background-size: cover;
          width: 46px;
          height: 46px;
          position: absolute;
          right:  -84px;
         bottom: 140px;
        }

для второго нужно сделать тоже самое только

background-image: url("../img/back.png")!important;

заменить на

background-image: url("../img/back2.png")!important;

Как мне это сделать?

Comments

[Froggyweb]

!important; наверное самое любимое свойство
сделай у слайдера класс theme-nav-mini, theme-nav-none, theme-nav-big,
и пиши стили для кнопок

Answer 1

[leni_m]

в этом слайдере предусмотрена опция для текста кнопок(или html кода кнопок)
например:

$('.owl-carousel1').owlCarousel({
    items: 5,
    navText: ['<div class="prev1"></div>','<div class="next1"></div>']
});
$('.owl-carousel2').owlCarousel({
    items: 5,
    navText: ['<div class="prev2"></div>','<div class="next2"></div>']
});
$('.owl-carousel3').owlCarousel({
    items: 5,
    navText: ['<div class="prev3"></div>','<div class="next3"></div>']
});

где

<div class="prev1"></div>
<div class="next1"></div>
<div class="prev2"></div>
<div class="next2"></div>
<div class="prev3"></div>
<div class="next3"></div>

ваши кнопочки, например.
И мой вам совет - не трогать css слайдера. Практически всё решается внутри .owlCarousel({...}) и обычно несколькими строками. Это лучше чем менять стандартные классы слайдера, и потом разбираться из за какого стиля слайдер криво выглядит или не работает.

Answer 2

[siarheisiarhei]

в html вроде этого....

<div style="background-image: url(img/left-chevron.svg)" class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>