Custom Options with Events

Autoplay Stop

Setup

This is an example of using custom events for navigation. Also it shows how you can customise widths and inherit option from tablet to mobile. 

  1. $(document).ready(function() {
  2.  
  3.   var owl = $("#owl-demo");
  4.  
  5.   owl.owlCarousel({
  6.       items : 10, //10 items above 1000px browser width
  7.       itemsDesktop : [1000,5], //5 items between 1000px and 901px
  8.       itemsDesktopSmall : [900,3], // betweem 900px and 601px
  9.       itemsTablet: [600,2], //2 items between 600 and 0
  10.       itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
  11.   });
  12.  
  13.   // Custom Navigation Events
  14.   $(".next").click(function(){
  15.     owl.trigger('owl.next');
  16.   })
  17.   $(".prev").click(function(){
  18.     owl.trigger('owl.prev');
  19.   })
  20.   $(".play").click(function(){
  21.     owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
  22.   })
  23.   $(".stop").click(function(){
  24.     owl.trigger('owl.stop');
  25.   })
  26.  
  27. });
  1. <div id="owl-demo" class="owl-carousel owl-theme">
  2.   <div class="item"><h1>1</h1></div>
  3.   <div class="item"><h1>2</h1></div>
  4.   <div class="item"><h1>3</h1></div>
  5.   <div class="item"><h1>4</h1></div>
  6.   <div class="item"><h1>5</h1></div>
  7.   <div class="item"><h1>6</h1></div>
  8.   <div class="item"><h1>7</h1></div>
  9.   <div class="item"><h1>8</h1></div>
  10.   <div class="item"><h1>9</h1></div>
  11.   <div class="item"><h1>10</h1></div>
  12.   <div class="item"><h1>11</h1></div>
  13.   <div class="item"><h1>12</h1></div>
  14.   <div class="item"><h1>13</h1></div>
  15.   <div class="item"><h1>14</h1></div>
  16.   <div class="item"><h1>15</h1></div>
  17.   <div class="item"><h1>16</h1></div>
  18. </div>
  19.  
  20. <div class="customNavigation">
  21.   <a class="btn prev">Previous</a>
  22.   <a class="btn next">Next</a>
  23.   <a class="btn play">Autoplay</a>
  24.   <a class="btn stop">Stop</a>
  25. </div>
  1. #owl-demo .item{
  2.   background: #3fbf79;
  3.   padding: 30px 0px;
  4.   margin: 10px;
  5.   color: #FFF;
  6.   -webkit-border-radius: 3px;
  7.   -moz-border-radius: 3px;
  8.   border-radius: 3px;
  9.   text-align: center;
  10. }
  11. .customNavigation{
  12.   text-align: center;
  13. }
  14. //use styles below to disable ugly selection
  15. .customNavigation a{
  16.   -webkit-user-select: none;
  17.   -khtml-user-select: none;
  18.   -moz-user-select: none;
  19.   -ms-user-select: none;
  20.   user-select: none;
  21.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  22. }
  23.  

More Demos

Images

Custom

Custom 2

One Slide

JSON

JSON Custom

Lazy Load

Auto Height