HTML Question

full width images slider

I'm trying to do a full width slider from scratch but i got stuck at the moment to put images width to 100%

I have a slider is 100% width and overflow: hidden, inside an ul is 10000px width. That's why I can not put images 100% width. Please help!
here is my 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>


here is my 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;
}


any help is going to be appreciated

Answer

You can use viewport height and width. I have created a code pen. Hope it works for you.

.slider .content-slides {
    width: 300vw;
}
.content-slides .slides {
    float: left;
    position: relative;
}
.content-slides img {
    width: 100vw;
}

In JS -

'margin-left': -(pos * Math.max(document.documentElement.clientWidth, window.innerWidth || 0) )
Comments