How to decrease the height of the responsive Slider

Question

I have a responsive slider in which i need to change the height of the slider images.I want the height:860px; and the rest of the layout should be the same as original.But i am not able to change the height of the slider.

Here is the basic css..

.skdslider{
 width:100%;
position: relative;
display: block;
overflow:hidden;
}

And here is the Fiddle that i have created ..

Fiddle

Images i have not added but it will all be of height of 860px; .

Please help me.

Updated :

.skdslider ul.slide-navs {
bottom: 20px;
left: 50%;
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
}


.skdslider ul.slide-navs li {
float: left;
background: url("image/slide-bg.png") no-repeat scroll 0 0 transparent;
height:12px;
width:12px;
margin-right:4px;
cursor:pointer;
}
.skdslider ul.slide-navs li.current-slide {
background: url("image/slide-bg-active.png") no-repeat scroll 0 0 transparent;
 }

Answer 1

In your css you have the below code:

.skdslider ul.slides li img{
width: 100%;
height:100%;
border:0;
}

Here, decrease the height percentage and check. Browser's developer mode can be useful in this case.

Hope this helps.