在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中構建圖像滑塊

回答

相關問題