在CSS中构建图像滑块

我需要一些帮助在css/HTML中构建图像滑块。在CSS中构建图像滑块

我的问题是，我必须滑动的五个图像不隐藏，因此它们跨越2个网页的整个宽度创建一个水平滚动条。我希望滑入的图像隐藏，因此没有水平滚动条。

.slider { 
 
    height: 350px; 
 
} 
 

 
.slider figure div { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
.slider figure img { 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.slider figure { 
 
    position: relative; 
 
    width: 500%; 
 
    left: 0; 
 
    animation: 40s slidy infinite; 
 
}

<div class="slider"> 
 
    <figure> 
 
    <div class="slide"><img src="#"></div> 
 
    <div class="slide"><img src="#"></div> 
 
    <div class="slide"><img src="#"></div> 
 
    <div class="slide"><img src="#"></div> 
 
    <div class="slide"><img src="#"></div> 
 
    </figure> 
 
</div>

来源

2017-05-03 JohnH

你的CSS的其余部分在哪里？和任何控制或任何东西？我们需要一个你有什么样的工作演示，因此理想情况下你也会包含图像的链接，以便我们看到你描述的问题。 –

真正简易的解决方案可能是给你的slider类：

width: <someFixedWidth>px; 
overflow: hidden;

这样，任何溢出的滑块将被隐藏。

来源

2017-05-03 22:52:26 ash

在CSS中构建图像滑块

回答

相关问题