我正在尝试从头开始做一个全宽 slider ,但我现在无法将图像宽度设置为 100%
我有一个 slider 是 100% 宽度和溢出:隐藏,在 ul 内部是 10000 像素宽度。这就是为什么我不能将图像设置为 100% 宽度。请帮忙! 这是我的 pen
<div id="slider" class="slider">
<ul class="content-slides">
<li class="slides">
<img src="img1.jpg" alt="">
<div>
<h1>lorem ipsum dolem</h1>
<p>paragraph</p>
</div>
</li>
<li class="slides">
<img src="img2.jpg" alt="">
<div>
<h1>lorem ipsum dolem</h1>
<p>paragraph</p>
</div>
</li>
<li class="slides">
<img src="img3.jpg" alt="">
<div>
<h1>lorem ipsum dolem</h1>
<p>paragraph</p>
</div>
</li>
</ul>
<div id="slider_nav"></div>
</div>
这是我的CSS
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.slider {
width: 100%;
/*width: 600px;*/
/*height: 300px;
margin: 100px auto 0;*/
overflow: hidden;
position: relative;
}
.slider .content-slides {
width: 10000px;
}
.content-slides .slides {
float: left;
position: relative;
}
.content-slides img {
width: 100%;
}
.content-slides div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 99;
color: #fff;
}
#slider_nav {
position: absolute;
z-index: 100;
top: 40%;
right: 10px;
}
#slider_nav li {
padding: 4px;
border: 1px solid #fff;
margin: 20px 0;
border-radius: 50%;
cursor: pointer;
}
#slider_nav li span {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
}
#slider_nav li span.active {
background: #fff;
}
我们将不胜感激
最佳答案
您可以使用视口(viewport)高度和宽度。我创建了一个 code pen .希望它对你有用。
.slider .content-slides {
width: 300vw;
}
.content-slides .slides {
float: left;
position: relative;
}
.content-slides img {
width: 100vw;
}
在 JS 中——
'margin-left': -(pos * Math.max(document.documentElement.clientWidth, window.innerWidth || 0) )
关于html - 全宽图像 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37244853/