Owl Carousel
- 1 ответ
- 0 вопросов
0
Вклад в тег
$(document).ready(function() {
$(".carousel__inner").owlCarousel({
loop: true,
margin: 10,
nav: false,
responsive: {
1: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
const owl = $(".owl-carousel");
owl.owlCarousel();
// Go to the next item
$(".owl-next").click(function() {
owl.trigger("next.owl.carousel", [1100]);
});
// Go to the previous item
$(".owl-prev").click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger("prev.owl.carousel", [1100]);
});<div class="carousel">
<div class="container">
<div class="carousel__inner owl-carousel owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<img src="img/slide_1.jpg" alt="slide" />
</div>
<div class="owl-item">
<img src="img/slide_2.jpg" alt="slide" />
</div>
<div class="owl-item">
<img src="img/slide_3.jpg" alt="slide" />
</div>
</div>
</div>
<div class="owl-nav">
<div>
<button type="button" class="owl-prev">
<img src="icons/left.svg" alt="left" />
</button>
</div>
<div>
<button type="button" class="owl-next">
<img src="icons/right.svg" alt="right" />
</button>
</div>
</div>
</div>
</div>
</div>
Простой