OwlCarousel2 Basic Single Item
<div class="slider-casos-exito-wrapper">
<div class="owl-carousel owl-theme js-slider-casos-exito">
<div class="item">
<h1 class="slidetitle">One</h1>
<p class="slidedesc">One</p>
</div>
<div class="item">
<h1 class="slidetitle">Two</h1>
<p class="slidedesc">Two</p>
</div>
<div class="item">
<h1 class="slidetitle">Three</h1>
<p class="slidedesc">Three</p>
</div>
</div>
<button class="btn goPrev" id="js-slider-casos-exito-prev">
<!-- <i class="icon-arrow-left"></i> -->
←
</button>
<button class="btn goNext" id="js-slider-casos-exito-next">
<!-- <i class="icon-arrow-right"></i> -->
→
</button>
</div>var sliderCasosExito = $('.js-slider-casos-exito');
sliderCasosExito.owlCarousel({
items:1,
loop:false, //cuidado si lo ponemos a true: infinite: cuidado cuando usemos esta opcion porque 'clonea' los items, y si tenemos elementos que lleven #id, duplica los #id, lo cual es un problema!!!
dots:false,
//nav:true, //next-prev buttons
//animateOut: 'zoomOut',
//animateIn: 'zoomIn',
navSpeed: 5000
//dotsSpeed: 4000,
//smartSpeed: 5000 //velocidad del drag
//mouseDrag: false,
//touchDrag: false,
//autoplay: true,
//addClassActive: true, //asignamos la class active al slide visible, para poder animar sus contenidos
//URLhashListener:true, //hash en las slides
/*
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
*/
//margin:10, //separation between slides
//center: true, //start in center item
//autoplay options
//autoplay:true,
//autoplayTimeout:3000,
//autoplayHoverPause:true
/*
Callbacks: example:
afterInit: showNav();
*/
//beforeUpdate : false,
//afterUpdate : false,
//beforeInit: false,
//afterInit: false,
//beforeMove: false,
//afterMove: onEnterOwlSlide
//afterAction: false,
//startDragging : false,
//afterLazyLoad : false
});
$("#js-slider-casos-exito-next").click(function(){
sliderCasosExito.trigger('next.owl.carousel', [300]); //OJO!!!! LE PASAMOS LA VELOCIDAD A LA QUE TIENE QUE EFECTUAR LOS SLIDES!
});
$("#js-slider-casos-exito-prev").click(function(){
sliderCasosExito.trigger('prev.owl.carousel', [300]);
});