Owl Carousel, making custom navigation
Solution 1
You need to enable navigation and edit navigationText:
> Assuming this is version 1.3.2
owlgraphic.com/owlcarousel/#customizing
Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example.
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
> Assuming it's version 2
:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav
$("#owl-example").owlCarousel({
nav: true,
navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
Personal suggestion: Use Slick over Owl
Personal suggestion update: Tiny slider is great too.
Solution 2
If you want to use your own custom navigation elements,
For Owl Carousel 1
var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
owl.trigger('owl.prev');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
owl.trigger('owl.next');
})
For Owl Carousel 2
var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger('prev.owl.carousel', [300]);
})
Solution 3
Create your custom navigation and give them classes you want, then you are ready to go. it's simple as that.
Let's see an example:
<div class="owl-carousel">
<div class="single_img"><img src="1.png" alt=""></div>
<div class="single_img"><img src="2.png" alt=""></div>
<div class="single_img"><img src="3.png" alt=""></div>
<div class="single_img"><img src="4.png" alt=""></div>
</div>
<div class="slider_nav">
<button class="am-next">Next</button>
<button class="am-prev">Previous</button>
</div>
In your js file you can do the following:
$(".owl-carousel").owlCarousel({
// you can use jQuery selector
navText: [$('.am-next'),$('.am-prev')]
});
Solution 4
I did it with css, ie: adding classes for arrows, but you can use images as well.
Bellow is an example with fontAwesome:
JS:
owl.owlCarousel({
...
// should be empty otherwise you'll still see prev and next text,
// which is defined in js
navText : ["",""],
rewindNav : true,
...
});
CSS
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
font-family: 'fontAwesome';
}
.owl-carousel .owl-nav .owl-prev:before{
// fa-chevron-left
content: "\f053";
margin-right:10px;
}
.owl-carousel .owl-nav .owl-next:after{
//fa-chevron-right
content: "\f054";
margin-right:10px;
}
Using images:
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
//width, height
width:30px;
height:30px;
...
}
.owl-carousel .owl-nav .owl-prev{
background: url('left-icon.png') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
background: url('right-icon.png') no-repeat;
}
Maybe someone will find this helpful :)
Solution 5
The following code works for me on owl carousel .
https://github.com/OwlFonk/OwlCarousel
$(".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
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$(".owl-carousel").owlCarousel({
items: 1,
autoplay: true,
nav: true,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
bltzrrr
Student of Faculty of Information Technology, Montenegro. JavaScript, AngularJS, JQuery, CSS, HTML5 and anything frontend really :)
Updated on March 27, 2020Comments
-
bltzrrr about 4 years
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?