多个图像/缩略图轮播/滑块，带有中间图像预览

Question

问候极客很容易投反对票，这是我第一次在stackoverflow上我是网络开发的新手。

我正在尝试实现以下图像滑块/轮播(检查下图(具有中间缩略图视图的多个缩略图轮播

应查看滑块上的 3 个缩略图和中间缩略图。

这是我能找到的最接近的代码段...代码片段

Answer 1

这是一个代码笔+代码

$('.owl-carousel').owlCarousel({
    center: true,
    items:3,
    loop:true,
    margin:50,
    responsive:{
        600:{
            items:3
        }
    }
});

.owl-stage {
  height: 400px;  
}
.owl-stage {
  display: flex;
  align-items: center;
}
.item {
  display: flex;
  flex-direction: column;
}
.owl-item {
  transition: all 0.3s;
  transform: scale(0.9, 1);
}
.owl-item.center  {
   transform: scale(1.2, 1.3);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel">
  <div class="item">
    <img src="https://via.placeholder.com/500x300">
    <span>Some caption</span>
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/500x300">
    <span>Some caption</span>
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/500x300">
    <span>Some caption</span>
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/500x300">
    <span>Some caption</span>
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/500x300">
    <span>Some caption</span>
  </div>
</div>