Owl carousel 1

shuffle - fct pe firefox versiuni vechi spre deosebire de random

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() {
    
    
    
    
    jQuery(function ($) {
    var parent = $(".carousel-inner");
    var divs = $(".item").not(":first-child");
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});
    
    
    
        $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
      
      //Sort random function
      function random(owlSelector){
        owlSelector.children().sort(function(){
        	  return $('.item').shuffle();
            //return $("#owl-demo > .item:not(:first-child)").shuffle(); //exclude first slide
        }).each(function(){
          $(this).appendTo(owlSelector);
          
          
        });
		
		//$("#owl-demo .item").slice(0, 6).remove(); //reducere la 6 imagini  
		$("#owl-demo .item").slice(parseInt(Math.random() * (7 - 4) + 4, 12)).remove();
		
      }
     
      $("#owl-demo").owlCarousel({
        navigation: true,
		singleItem:true,
		navigationText : ["inapoi","inainte"],
		rewindNav : true,
		lazyLoad: true,
		rewindNav: true,	
        beforeInit : function(elem){
          random(elem);
        }
     
      });
     
    });