gpt4 book ai didi

html - 为幻灯片显示内联图像

转载 作者:太空宇宙 更新时间:2023-11-04 08:26:34 24 4
gpt4 key购买 nike

我正在尝试创建一个 carousel flexbox,我面临着在容器内显示元素的问题!

我希望元素列表以内嵌方式显示并隐藏/隐藏在容器后面。换句话说,我不希望它再排成一排。更像是一个 slider 。

这是我到目前为止所做的。

.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>
&nbsp;
<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>
&nbsp;
<a class="next-button navigation" href="#">></a>
</div>

最佳答案

carousel-container 分配特定的宽度和高度,并使其溢出隐藏。然后是包含幻灯片元素的 carousel-item。至少为其分配比父 div 更宽的宽度(或使用 jquery 动态分配宽度)。因为父级的宽度较短并且溢出隐藏,所以它会显示它可以显示的那些元素。不要忘记让 li display: inline;

.carousel-container {
width: 360px;
height: 200px;
overflow: hidden;
}

.slidescontainer {
width: 840px;
height: 200px;
}

.carousel-item li {
display: inline;
}

请在此处查看第二个 slider 的来源:https://umair-ameen.github.io/zoom-slider/

关于html - 为幻灯片显示内联图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45126699/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com