gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:08:04 26 4
gpt4 key购买 nike

<分区>

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

这是一个例子: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;
}

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com