在幻灯片中以内联方式显示图像
在幻灯片中以内联方式显示图像
提问于 2017-07-16 16:47:24
我正在尝试创建一个carousel 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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-16 17:14:08
为carousel-container指定特定的宽度和高度，并使其溢出隐藏。然后是包含幻灯片项目的carousel-item。为它分配至少比父div更宽的宽度(或者使用jquery动态分配宽度)。因为父元素的宽度较短，并且溢出是隐藏的，所以它将显示那些它可以显示的项。别忘了让li显示:内联；
.carousel-container {
width: 360px;
height: 200px;
overflow: hidden;
}
.slidescontainer {
width: 840px;
height: 200px;
}
.carousel-item li {
display: inline;
}
在这里查看第二个滑块的源代码：https://umair-ameen.github.io/zoom-slider/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45126699
复制相关文章
相似问题
腾讯云开发者
