I'm finishing customizing a slider, using OwnCarousel. However, this page already has another slider, which shows the products.
What I've done so far, lets them have the arrows for different sliders:
var slider1 = $('.owl_carousel.banner_superior');
slider1.owlCarousel({
responsiveClass: true,
responsive : {
0 : {
items : 1
},
465 : {
items : 1
},
580 : {
items : 1
},
991 : {
items : 1
},
1199 : {
items : 1
}
},
items : 1,
autoPlay : 3000,
navigation:true,
navigationText: [
"<i class='icon icon-lori-1'></i>",
"<i class='icon icon-lori'></i>"
],
themeClass : 'carousel_with_five_items',
rtl: window.ISRTL ? true : false
});
$(".next1").click(function(){ slider1.trigger('owl.next'); });
$(".prev1").click(function(){ slider1.trigger('owl.prev'); }); <div class="owl_carousel banner_superior">
<div class="item">
<img src="http://www.hostmove.com.br/ferragenstavares/images/slider/grd/00beab71fb8e3d5503d31b40e93c0cbc.jpg"class="img-responsive banner_desktop" />
<img src="https://www.akiachei.com/images/slider/smartphone/grd/7b6c956d2b7d6f05864356cca77dd591.jpg"class="img-responsive banner_smartphone" />
</div>
<div class="item">
<img src="http://www.hostmove.com.br/ferragenstavares/images/slider/grd/00beab71fb8e3d5503d31b40e93c0cbc.jpg"class="img-responsive" />
</div>
<div class="item">
<img src="http://www.hostmove.com.br/ferragenstavares/images/slider/grd/00beab71fb8e3d5503d31b40e93c0cbc.jpg"class="img-responsive" />
</div>
</div>
<div class="customNavigation">
<a class="btn prev1"><i class="fa fa-chevron-left"></i></a>
<a class="btn next1"><i class="fa fa-chevron-right"></i></a>
</div> Now, you only have to make the owl-pagination appear for this slider.