在下面的代码中,我有一个轮播的代码。
仅显示部分图像(container
),使用javascript将包含所有图像的div(items
)左右移动。
如果浏览器窗口缩小the container
变小,则可以缩小图像
图像数量(item
)不固定。
.carousel {
max-width: 70%;
margin: 1.5rem 1.5rem 0 1.5rem;
position: relative; }
.container {
margin: 0;
padding: 1rem 0;
position: relative;
overflow: hidden; }
.items {
display: flex;
flex-direction: row;
left: 0;
position: relative;
top: 0;
transition: 0.2s; }
.item {
cursor: pointer;
height: 9.375rem;
padding: 0.5rem;
transition: 0.2s;
width: 9.375rem;
}
<div class="carousel" >
<div class="container">
<div class="items">
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
<div class="item" data-carousel-item="">
<img src="https://via.placeholder.com/100"/>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
当前,您使用rem作为量词,它基于根元素的字体大小,但是我看不到您会根据媒体查询来调整字体的任何内容。如果您不是特别需要100x100之类的精确测量值,那么我建议您改用视口量词,因为当浏览器缩小时,这些值会改变。我为外观添加了flex-wrap属性,可以将其删除并根据需要添加回溢出
<meta name="viewport" content="width=device-width,initial-scale=1.0">
.carousel {
max-width: 70%;
margin: 1vw 1vw 0 1vw;
position: relative; }
.container {
width:100%;
margin: 0;
padding: 1vw 0;
position: relative; }
.items {
display: flex;
flex-direction: row;
flex-wrap : wrap;
left: 0;
position: relative;
top: 0; }
.item img {
cursor: pointer;
height: 10vw;
margin:1vw;
transition: 0.2s;
width: 10vw;
}