显示内嵌幻灯片的图像

Question

我正在尝试创建旋转木马flexbox，我面临着在容器内显示项目的问题！

我希望项目列表以内联方式显示，然后关闭/隐藏在容器后面。换句话说，我不希望它再做一行。更像是一个滑块。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将特定宽度和高度指定给carousel-container并使其隐藏溢出。然后是carousel-item，其中包含幻灯片项目。为它指定至少比父div更宽的宽度（或使用jquery动态分配宽度）。因为父级具有较短的宽度并且隐藏了溢出，所以它将显示它可以的那些项目。不要忘记li显示：内联;

＆＃13;

＆＃13;

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

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

.carousel-item li {
  display: inline;
}

 

＆＃13;

＆＃13;

＆＃13;

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