html - 如何在轮播中每页显示三个元素？

Question

我一直在尝试修改此轮播 ( https://codepen.io/ancaspatariu/pen/WpQYOP ) 以便将其插入图书零售网站。我想要实现的是为轮播的每个“幻灯片”显示三个书籍封面。现在这是我的代码，我添加了 display: inline-block 属性，但它仍然在每张幻灯片上显示一个封面。代码较长，但我将只向您展示有关图像轮播布局的部分。

HTML

<div>
<div class="carousel">
<ul class="slides">
<input type="radio" name="radio-buttons" id="img-1" checked />
  <li class="slide-container">
  <div class="slide-image">
  <img src="Bookaholic/img/DearData_US_jacket.jpeg" >
  </div>
  <div class="slide-image">
  <img src="Bookaholic/img/DearData_US_jacket.jpeg" >
  </div>

CSS

ul.slides {
  display: block;
  position: relative;
  height: 600px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.slide-container { 
  display: inline-block; 
  white-space: nowrap;
  width:1400px;
}

.slide-image {
  display: inherit;
  position: absolute;
  bottom:80%;
  left:20%;
  width: 20%;
  height: 60%;
  top: 0;
  opacity: 0;
  transition: all .7s ease-in-out;
}  

.slide-image img {
  width: 20%;
  min-width: 100%;
  height: 100%;
}

Answer 1

您可以使用插件来做到这一点:Slick Carousel 很棒，查看链接 https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/