Owl carousel 1

Randomise carousel slides except 1st slide

by 8ogdan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
	  <div id="owl-demo" class="owl-carousel owl-theme">
	  <div class="item"><h1>1</h1></div>
	  <div class="item"><h1>2</h1></div>
	  <div class="item"><h1>3</h1></div>
	  <div class="item"><h1>4</h1></div>
	  <div class="item"><h1>5</h1></div>
	  <div class="item"><h1>6</h1></div>
	  <div class="item"><h1>7</h1></div>
	  <div class="item"><h1>8</h1></div>
	  <div class="item"><h1>9</h1></div>
	  <div class="item"><h1>10</h1></div>
	  <div class="item"><h1>11</h1></div>
	  <div class="item"><h1>12</h1></div>
	</div>

	<div id="text">
	<i>In exemplu exista 12 bannere cu denumiri de la 1 la 12. Se poate verifica la fiecare refresh randomizarea lor si reducerea la 6 bannere. De asemenea la fiecare loop, elementele raman neschimbate.</i><br/><br/>
<p>Dupa implementare numarul maxim de imagini disponibile pentru banner il recomand sa fie 12, pentru afisare recomandarea este de 4 sau 6.
	</p>
	</div>

CSS

#owl-demo .item{
    background: #42bdc2;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}

.owl-theme .owl-dots {
padding-bottom: 20px;
border-bottom: 1px solid #e4e4e4;
}

.owl-item .item h1 {
font-size: 40px;
}

#text {
width: 60%;
margin: 0 auto;
text-align: center;
font-family: arial;
padding-top: 30px;
}

#text p {
text-align: left;
line-height: 28px;
font-size: 18px;
}

@media screen and (max-width: 980px) {
	#text {
	width: 80%;
	}
}

JavaScript

$(document).ready(function() {
    
//Randomise carousel slides except 1st slide
    var parent = $("#owl-demo");
    var divs = $(".item").not(".item:first-child");
    while (divs.length) {
        //parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
     
      //Sort random function
      function random(owlSelector){
        owlSelector.children().sort(function(){
            //return Math.round(Math.random()) - 0.5;
        }).each(function(){
          $(this).appendTo(owlSelector);
        });
 			
			$("#owl-demo .item").slice(parseInt(Math.random() * (7 - 6) + 6, 12)).remove();
		
      }
     
      $("#owl-demo").owlCarousel({
        navigation: true,
				singleItem:true,
				navigationText : ["inapoi","inainte"],
				rewindNav : true,
				lazyLoad: true,
          beforeInit : function(elem){
          random(elem);
          }
	     });
     
    });