猫头鹰旋转木马的多个幻灯片 随机对其进行随机化

Question

我试图使用3座幻灯片制作猫头鹰旋转频率加载页。

每次我刷新页面时我希望它们随机显示。

我在这里做一个简单的示例，以更好地理解：

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
var imageIndex = Math.floor((Math.random() * 2) + 1);
document.getElementById("randomSlide" + imageIndex).style.display = "block";

.test {
  max-width: 400px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css">
<!-- Set up your HTML -->
<div class="test">
  <div class="owl-carousel">
    <div>
      <img class="randomSlide1" style="display:none;" src="https://dummyimage.com/200x100/000/fff&text=test1">
      <img class="randomSlide2" style="display:none;"  src="https://dummyimage.com/200x100/000/fff&text=test2">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test3">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test4">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test5">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test6">
    </div>
  </div>
</div>

我尝试使用display：无用于图像，并且使用此JavaScript方法但不起作用：

var imageIndex = Math.floor((Math.random() * 2) + 1);
document.getElementById("randomSlide" + imageIndex).style.display = "block";

Answer 1

这是借助bratu sebastian的解决方案

var owl = $('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
});
function checkRandom() {
var slide = $('.owl-carousel .owl-item.active');
console.log( slide );
var imgs = slide.find('img');
var imageIndex = Math.floor(Math.random() * imgs.length );
if( imgs.length > 1 ){
	imgs.css('display', 'none');
	imgs.eq(imageIndex).css('display', 'block');
}
}
owl.on('changed.owl.carousel', function(event) {
var slide = $(event.target).find('.owl-item').eq(event.item.index);
var imgs = slide.find('img');
var imageIndex = Math.floor(Math.random() * imgs.length );
if( imgs.length > 1 ){
	imgs.css('display', 'none');
	imgs.eq(imageIndex).css('display', 'block');
}
});
setTimeout( checkRandom, 200 );

.test {
  max-width: 400px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css">
<!-- Set up your HTML -->
<div class="test">
  <div class="owl-carousel">
    <div>
      <img class="randomSlide1" style="display:none;" src="https://dummyimage.com/200x100/000/fff&text=test1">
      <img class="randomSlide2" style="display:none;"  src="https://dummyimage.com/200x100/000/fff&text=test2">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test3">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test4">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test5">
    </div>
    <div>
      <img src="https://dummyimage.com/200x100/000/fff&text=test6">
    </div>
  </div>
</div>