我想创建一个旋转木马flexbox,我面临的问题是显示容器内的项目!显示图像内嵌幻灯片
我希望项目列表内联显示并隐藏在容器后面。换句话说,我不希望它再做一次。更像一个滑块。
这是我到目前为止所做的。
.carousel-container {
height: 100%;
display: flex;
padding: 20px;
margin:40px 20px;
overflow:hidden;
position:relative;
width:auto;
border: 1px solid red;
align-items: center;
justify-content: center;
}
.carousel-item {
padding: 0;
margin: 0;
}
.item {
border: 0.5px solid blue;
padding: 10px;
margin: 1px;
display: inline-flex;
width: 10%;
}
.item > a {
width: 100%;
display: flex;
justify-content: center;
}
.prev-button, .next-button {
border: 1px solid green;
}
.navigation {
height:120px;
width: 60px;
margin: 0;
position: absolute;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.next-button:hover, .prev-button:hover {
background-color: red;
}
.navigation:active {
color: white;
}
.next-button {
right:0;
}
.prev-button {
left: 0;
}
<div class="carousel-container">
<a class="prev-button navigation" href="#"><</a>
<div class="carousel-item">
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
<li class="item"><a href="#"> TESTING </a></li>
</div>
<a class="next-button navigation" href="#">></a>
</div>
它是否解决您的问题? –