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%;
}

标签： htmlcss

Answer 1

您可以使用插件来执行此操作：Slick Carousel 是一个很棒的插件，请查看链接https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/