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

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/

Answer 2

根据您引用的CodePen上的示例，要对其进行修改以在每张幻灯片中包含3张图像，只需在每张div.slide-image中再添加2张图像，例如：

<div class="slide-image">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  ...

然后将这些图片的css更改为：

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

Answer 3

我认为可以通过使用flexbox或grid来实现。这是一个快速示例，我已经准备向您展示如何使用flexbox。主要属性是“ Flex基础”，我将需要更多的代码才能针对您的用例进行复制：

“ carrusel__wrapper”将是您的slide_container，“项目”将是您的slide_image。

<div class="carrusel__wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

和CSS：

.carrusel__wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item{
  height: 200px;
  width: 200px;
  background-color: red;
  margin: 0 10px;
}

https://codepen.io/anon/pen/ROKrdN

如果您提供给我更简洁的代码，我可以准备一个更好的示例。