Question

在否定投票上招呼极客，这是我第一次参加stackoverflow 而且我是Web开发人员的新手。

我正在尝试实现以下图像滑块/转盘（请查看下面的图像） Multiple thumbnails Carousel with middle thumbnail view

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

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

Answer 1

这是codepen +代码

$('.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>

带有中间图像预览的多个图像/缩略图转盘/滑块

1 个答案: