CSS如何在滑块中仅显示1个图像

Question

我的滑块里有4张图片。 如果我打开我的网站，我就可以看到所有这些内容。我该如何隐藏其中的3个？它们只在点击箭头时滑入？

<div id="content">
            <div class="container">
            <div class="slider_wrapper">
                <ul id="image_slider">
                    <li><img src="images/slider-1.jpg"></li>
                    <li><img src="images/slider-2.jpg"></li>
                    <li><img src="images/slider-3.jpg"></li>
                    <li><img src="images/slider-4.jpg"></li>
                </ul>                   
                <span class="nvgt" id="prev"></span>
                <span class="nvgt" id="next"></span>
            </div>
            </div>


@media only screen
and (max-width : 700px) {
/* Styles */
   .slider_wrapper {
       max-height: 150px;
   }
   #image_slider{
   max-width: 100%;
   }
   #image_slider img{
       width:100%;
   }

}

@media only screen
and (min-width : 1280px) {
/* Styles */
   .slider_wrapper {
       max-height: 150px;

   }
   #image_slider{
   max-width: 100%;
   }
   #image_slider img{
       width:100%;
   }

}

@media only screen
and (max-width : 1280px) {
/* Styles */
   .slider_wrapper {
       max-height: 150px;

   }
   #image_slider{
   max-width: 100%;
   }
   #image_slider img{
       width:100%;
   }

}

@media only screen
and (max-width : 1024px) {
/* Styles */
   .slider_wrapper {
       max-height: 150px;

   }
   #image_slider{
   max-width: 100%;
   }
   #image_slider img{
       width:100%;
   }

}
.slider_wrapper{
    max-width: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
#image_slider{
    position: relative;
    list-style: none;
    overflow: hidden;
    float: left;
    /*Chrom default padding for ul is 40px */
    padding:0px;
    margin:0px;
}
#image_slider li{
    position: relative;
    float: left;
}
.nvgt{
    position:absolute;
    top: 150px;
    height: 50px;
    width: 30px;
    opacity: 0.6;
}
.nvgt:hover{
    opacity: 0.9;
}
#prev{
    background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
    left: 0px;
}
#next{
    background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
    right: 0px;
}

我知道这是可能的，但是因为我已经做出了响应，所以它不再适用了。