CSS
#owl-demo {
width: 900px;
margin-left: auto;
margin-right: auto;
}
#owl-demo .item {
margin: 5px;
padding: 30px 0;
font: 48px arial;
text-align: center;
color: #fff;
}
HTML
<div id="owl-demo" class="owl-carousel">
<div class="item orange">1</div>
<div class="item darkCyan">2</div>
<div class="item yellow">3</div>
<div class="item forestGreen">4</div>
<div class="item dodgerBlue">5</div>
<div class="item skyBlue">6</div>
<div class="item zombieGreen">7</div>
<div class="item violet">8</div>
<div class="item steelGray">9</div>
<div class="item dodgerBlue">10</div>
<div class="item darkCyan">11</div>
<div class="item zombieGreen">12</div>
<div class="item orange">13</div>
<div class="item forestGreen">14</div>
<div class="item skyBlue">15</div>
<div class="item darkCyan">16</div>
</div>
JavaScript
$(function(){
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
$('#owl-demo').owlCarousel({
beforeInit: function(elem){
random(elem);
}
});
});