JSFiddle - React, Tailwind, and code Playground

Imagini aleatoriu preluate

by 8ogdan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/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 class="slider-counter"></div><!--pagination-->

CSS

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

.slider-counter {
  background: #fff;
  position: absolute;
  top: 24px;
  z-index: 1000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  right: 30px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  font-family: arial;
  justify-content: center;
}

JavaScript

$(document).ready(function() {

var owl = $("#owl-demo");

//pagination
$("#owl-demo").on("initialized.owl.carousel changed.owl.carousel", function(e) {
    if (!e.namespace)  {
      return;
    }
    var carousel = e.relatedTarget;
    $(".slider-counter").text(carousel.relative(carousel.current()) + 1 + '/' + carousel.items().length);
  });
//END pagination  

owl.owlCarousel({
		items: 1,
   	  navText : ["inapoi","inainte"],
  		nav: true,
      rewindNav : true,
    lazyLoad: true,  //false
    loop: true,
    smartSpeed: 500, //250
    fluidSpeed: 10,
    //animateOut: true,
    //animatedIn: true,
    onInitialize : function(element){
        owl.children().sort(function(){
            return Math.round(Math.random()) - 0.5;
            //return parseInt(Math.random() * (6 - 0) + 0, 12); //nu fct in chrome si ie
        }).each(function(){
            $(this).appendTo(owl);
        });
        

//$('#owl-demo .item').slice(0, 6).remove(); //reducere la 6 imagini
$('#owl-demo .item').slice(parseInt(Math.random() * (7 - 4) + 4, 12)).remove(); //randomizare numar imagini in slide - dinamic - parseInt(Math.random() * (max - min) + min, 10)
        
        
    },
});
 
 
});