html – 如何在单行中水平滚动图像

我正在尝试创建一种基本的图像轮播.我的问题是：如何让我的所有幻灯片在一行中显示并让它们水平滚动而不是垂直滚动？

这是一个例子：http://jsfiddle.net/3f7fcspL/

HTML：

<div id="carousel">
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
</div>

CSS：

#carousel {
    width: 100%;
    height: 150px;
    background-color: #ff0000;
    overflow: auto;
}

#carousel .slide {
    display: inline-block;
}

解决方法

#carousel {
    width: 100%;
    height: 150px;
    background-color: #ff0000;
    
    overflow: visible;
    white-space:nowrap;
}

#carousel .slide {
    display: inline-block;
}

<div id="carousel">
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
</div>

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!