Owl Carousel, making custom navigation
So i have an Owl Carousel that contains three images. I also added custom navigation arrows (.png images) on left and right sides. However, those arrows are currently useless, because I can't find a way to actually make them switch between images of my Owl Carousel. I searched endlessly and can't find the solution. Any ideas?
jQuery
- asked 7 years ago
- G John
2Answer
You need to enable navigation and edit navigationText:
Assuming this is version 1.3.2
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
Assuming it's version 2:
$("#owl-example").owlCarousel({
nav: true,
navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
- answered 7 years ago
- Community wiki
The following code works for me on owl carousel .
$(".owl-carousel").owlCarousel({
items: 1,
autoplay: true,
navigation: true,
navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
For OwlCarousel2
$(".owl-carousel").owlCarousel({
items: 1,
autoplay: true,
nav: true,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
- answered 7 years ago
- Community wiki
Best Rated Questions
Your Answer