Как я могу показать три элемента на странице в карусели?
Я пытался изменить эту карусель (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%;
}
Ответы 3
Из приведенного вами примера КодПен, чтобы изменить его, чтобы включить 3 изображения в каждый слайд, вам просто нужно добавить еще 2 изображения в каждый div.slide-image, например:
<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%;
}
Это было так просто. К сожалению, я только начал с HTML и CSS. Спасибо Вам и всем ответившим!
Для этого вы можете использовать плагин: Slick Carousel — отличная штука. Перейдите по ссылке https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/.
Я думаю, что это можно сделать с помощью flexbox или сетки. Это быстрый пример, который я подготовил, чтобы показать вам, как использовать flexbox. Основным свойством будет «Основа Flex». Мне понадобится больше вашего кода, чтобы воспроизвести его для вашего варианта использования:
«carrusel__wrapper» будет вашим слайдом_контейнером, а «элемент» — вашим слайдом_изображением.
<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
Я могу подготовить лучший пример, если вы предоставите мне более чистый код.
Вам нужно будет поместить три изображения на каждый слайд, однако я бы не советовал использовать это, поскольку он имеет недопустимый html - входы не могут быть дочерними элементами ul