exhtml
4/20/2017 - 5:59 AM

OwlCarousel2 Basic Single Item

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> -->
    &larr;
  </button>
  <button class="btn goNext" id="js-slider-casos-exito-next">
    <!-- <i class="icon-arrow-right"></i> -->
    &rarr;
  </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]);
	});