# Random order and custom navi.

# 1

# 2

# 3

# 4

# 5

# 6

# 7

# 8

# 9

# 10

# 11

# 12

# 13

# 14

# 15

# 16

# Setup

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

    $(document).ready(function() {

      //Sort random function
      function random(owlSelector){
        owlSelector.children().sort(function(){
            return Math.round(Math.random()) - 0.5;
        }).each(function(){
          $(this).appendTo(owlSelector);
        });
      }

      $("#owl-demo").owlCarousel({
        navigation: true,
        navigationText: [
          "<i class='icon-chevron-left icon-white'></i>",
          "<i class='icon-chevron-right icon-white'></i>"
          ],
        beforeInit : function(elem){
          //Parameter elem pointing to $("#owl-demo")
          random(elem);
        }

      });

    });

    <div id="owl-demo" class="owl-carousel owl-theme">
      <div class="item orange"><h1>1</h1></div>
      <div class="item darkCyan"><h1>2</h1></div>
      <div class="item yellow"><h1>3</h1></div>
      <div class="item forestGreen"><h1>4</h1></div>
      <div class="item dodgerBlue"><h1>5</h1></div>
      <div class="item skyBlue"><h1>6</h1></div>
      <div class="item zombieGreen"><h1>7</h1></div>
      <div class="item violet"><h1>8</h1></div>
      <div class="item steelGray"><h1>9</h1></div>
      <div class="item dodgerBlue"><h1>10</h1></div>
      <div class="item darkCyan"><h1>11</h1></div>
      <div class="item zombieGreen"><h1>12</h1></div>
      <div class="item orange"><h1>13</h1></div>
      <div class="item forestGreen"><h1>14</h1></div>
      <div class="item skyBlue"><h1>15</h1></div>
      <div class="item darkCyan"><h1>16</h1></div>
    </div>

    #owl-demo .item{
      display: block;
      padding: 30px 0px;
      margin: 5px;
      color: #FFF;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      text-align: center;
    }
    .owl-theme .owl-controls .owl-buttons div {
      padding: 5px 9px;
    }

    .owl-theme .owl-buttons i{
      margin-top: 2px;
    }

    //To move navigation buttons outside use these settings:

    .owl-theme .owl-controls .owl-buttons div {
      position: absolute;
    }

    .owl-theme .owl-controls .owl-buttons .owl-prev{
      left: -45px;
      top: 55px;
    }

    .owl-theme .owl-controls .owl-buttons .owl-next{
      right: -45px;
      top: 55px;
    }

# More Demos

### Images

### Full Width

### Custom

### One Slide

### JSON

### JSON Custom

### Lazy Load

### Auto Height