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