Owl Carousel 一张幻灯片中的多个图像+随机化它们

Question

我正在尝试使用（owl 2 插件）和 3 张幻灯片制作 Owl Carousel，其中一张必须包含 2 或 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: none 并使用此 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>