显示图像内嵌幻灯片

Question

我想创建一个旋转木马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> 
 
    &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>

Answer 1

特定的宽度和高度，分配给carousel-container并使其溢出隐藏。然后在其中有幻灯片项的carousel-item。指定它至少比父div宽（或使用jquery动态分配宽度）。由于父母的宽度较短并且隐藏了溢出，因此会显示可以显示的项目。别忘了让li显示：inline;

.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/