How to make unique buttons (prev, next) for each of 3 Owl-carousel sliders?

Question

css

For the site, you need to make 3 sliders, I connected and customized them, but the catch was that for each of them you need to make different buttons. There are #slide-one and #slide-two, the following styles are used to customize the buttons of the first one

.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;
        }

for the second you need to do the same only

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

replaced by

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

How can I do it?

Answer 1

this slider has an option for button text (or html button code)
for example:

$('.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>']
});

where

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

your buttons, for example.
And my advice to you is not to touch the css of the slider. Almost everything is solved inside .owlCarousel({...}) and usually in a few lines. This is better than changing the standard slider classes and then figuring out what style the slider looks crooked or doesn't work.

Answer 2

in html like this....

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