JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
<ul id="slider" class='owl-carousel one'>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/01.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/02.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/03.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/04.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/05.jpg"/></li>
</ul>
<ul id="slider" class='owl-carousel two'>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/01.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/02.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/03.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/04.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/05.jpg"/></li>
</ul>
<ul id="slider" class='owl-carousel three'>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/01.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/02.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/03.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/04.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/05.jpg"/></li>
</ul>
<ul id="slider" class='owl-carousel four'>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/01.jpg"/></li>
  <li class='item'><img src="http://www.devtrix.net/sliderman/demos/demo/img/02.jpg"/></li>
  <li class='item'><img...

JavaScript

var owl = $("#slider");
function myFunction() {
  var time = new Date().getSeconds(); // to be commented
  //var time = new Date().getHours();
  if (time >= 0 && time < 10) {
    $('.owl-carousel').hide();
    $('.one').show();
  } else if (time >= 10 && time < 12) {
    $('.owl-carousel').hide();
    $('.two').show();
  } else if (time >= 12 && time < 16) {
    $('.owl-carousel').hide();
    $('.three').show();
  } else if (time >= 16 && time < 20) {
    $('.owl-carousel').hide();
    $('.four').show();
  } else { }
}
myFunction();
$(".owl-carousel").each(function(index,el){
	$(el).owlCarousel({
    items: 1,
    loop: true
  });
});
var timeSec = new Date().getSeconds();
window.setInterval(function() {
  myFunction();
}, 2000); // to be commented
//}, (60 - timeSec) * 1000);