Я испоьзую 2 слайдера owl carousel на одном странице, для них есть кнопки left right, поблема в том что когда на первом слайдера нажмаю left или right то меняется и второй слайдер, двое одновременно, хотя у них разные id. Щас код покажу
$(document).ready(function(){
const headerSlider = $(".owl-carousel");
headerSlider.owlCarousel({
loop: true,
nav: false,
dots: false,
responsive:{
0:{
items:1,
},
600:{
items:1,
},
991:{
items:1,
},
1000:{
items:5,
}
}
});
$('#headerSliderLeft').click(function () {
headerSlider.trigger('prev.owl.carousel');
})
$('#headerSliderRight').click(function () {
headerSlider.trigger('next.owl.carousel');
})
});
$(document).ready(function(){
const AlemSlider = $(".owl-carousel");
AlemSlider.owlCarousel({
loop: true,
nav: false,
dots: false,
responsive:{
0:{
items:1,
},
600:{
items:1,
},
991:{
items:1,
},
1000:{
items:5,
}
}
});
$('#AlemSliderLeft').click(function () {
AlemSlider.trigger('prev.owl.carousel');
})
$('#AlemSliderRight').click(function () {
AlemSlider.trigger('next.owl.carousel');
})
});
Html код controls первого слайдера:
<div class="slide-next-prev">
<div class="slide-controls">
<a id="headerSliderLeft" class="left carousel-control">
<span class="left-knopka glyphicon glyphicon-chevron-left"></span>
</a>
</div>
<div class="slide-controls2">
<a id="headerSliderRight" class="right carousel-control">
<span class="right-knopka glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
и второго
<div class="slide-next-prev">
<div class="slide-controls">
<a id="AlemSliderLeft" class="left carousel-control">
<span class="left-knopka glyphicon glyphicon-chevron-left"></span>
</a>
</div>
<div class="slide-controls2">
<a id="AlemSliderRight" class="right carousel-control">
<span class="right-knopka glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
