overflow:hidden is hiding everything on a webpage - css

Question

I'm trying to make a slider in a webpage, but overflow:hidden is hidding' everything instead just hide what comes out of the screen.
i need the images to be aligned and everything that comes out of the screen to be hidden.
My fiddle here:
HTML
<div>
<ul>
<li><img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs"/></li>
<li><img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs"/></li>
<li><img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs"/></li>
<li><img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs"/></li>
</ul>
</div>
CSS:
ul{
list-style:none;
}
li{
position:absolute;
}
.imgs{
height:130px;
width:180px;
float:left;
}
div{
overflow:hidden;
position:relative;
}
Fiddle:
https://jsfiddle.net/mkv9x2fg/2/

Answer 1

Try removing the position absolute from the li
ul {
list-style: none;
white-space:nowrap;
}
li {
display:inline-block;
}
.imgs {
height: 130px;
width: 180px;
}
div {
overflow: hidden;
position: relative;
}
<div>
<ul>
<li>
<img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs" />
</li>
<li>
<img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs" />
</li>
<li>
<img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs" />
</li>
<li>
<img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs" />
</li>
</ul>
</div>
EDIT: made the li inline-block and set the div to hide the overflow.
It's a little unclear what the OP is trying to do.

Answer 2

Try setting a div width like width: 200px; heigth: auto: max-height: 500px;