Random order and custom navi.

Setup

A little play with beforeInit function. Refresh browser to see effect. Also check css to get idea how move navi buttons. 

  1. $(document).ready(function() {
  2.  
  3.   //Sort random function
  4.   function random(owlSelector){
  5.     owlSelector.children().sort(function(){
  6.         return Math.round(Math.random()) - 0.5;
  7.     }).each(function(){
  8.       $(this).appendTo(owlSelector);
  9.     });
  10.   }
  11.  
  12.   $("#owl-demo").owlCarousel({
  13.     navigation: true,
  14.     navigationText: [
  15.       "<i class='icon-chevron-left icon-white'></i>",
  16.       "<i class='icon-chevron-right icon-white'></i>"
  17.       ],
  18.     beforeInit : function(elem){
  19.       //Parameter elem pointing to $("#owl-demo")
  20.       random(elem);
  21.     }
  22.  
  23.   });
  24.  
  25. });
  1. <div id="owl-demo" class="owl-carousel owl-theme">
  2.   <div class="item orange"><h1>1</h1></div>
  3.   <div class="item darkCyan"><h1>2</h1></div>
  4.   <div class="item yellow"><h1>3</h1></div>
  5.   <div class="item forestGreen"><h1>4</h1></div>
  6.   <div class="item dodgerBlue"><h1>5</h1></div>
  7.   <div class="item skyBlue"><h1>6</h1></div>
  8.   <div class="item zombieGreen"><h1>7</h1></div>
  9.   <div class="item violet"><h1>8</h1></div>
  10.   <div class="item steelGray"><h1>9</h1></div>
  11.   <div class="item dodgerBlue"><h1>10</h1></div>
  12.   <div class="item darkCyan"><h1>11</h1></div>
  13.   <div class="item zombieGreen"><h1>12</h1></div>
  14.   <div class="item orange"><h1>13</h1></div>
  15.   <div class="item forestGreen"><h1>14</h1></div>
  16.   <div class="item skyBlue"><h1>15</h1></div>
  17.   <div class="item darkCyan"><h1>16</h1></div>
  18. </div>
  1. #owl-demo .item{
  2.   display: block;
  3.   padding: 30px 0px;
  4.   margin: 5px;
  5.   color: #FFF;
  6.   -webkit-border-radius: 3px;
  7.   -moz-border-radius: 3px;
  8.   border-radius: 3px;
  9.   text-align: center;
  10. }
  11. .owl-theme .owl-controls .owl-buttons div {
  12.   padding: 5px 9px;
  13. }
  14.  
  15. .owl-theme .owl-buttons i{
  16.   margin-top: 2px;
  17. }
  18.  
  19. //To move navigation buttons outside use these settings:
  20.  
  21. .owl-theme .owl-controls .owl-buttons div {
  22.   position: absolute;
  23. }
  24.  
  25. .owl-theme .owl-controls .owl-buttons .owl-prev{
  26.   left: -45px;
  27.   top: 55px; 
  28. }
  29.  
  30. .owl-theme .owl-controls .owl-buttons .owl-next{
  31.   right: -45px;
  32.   top: 55px;
  33. }
  34.  
  35.  

More Demos

Images

Custom

Custom 2

One Slide

JSON

JSON Custom

Lazy Load

Auto Height