Very Simple Image Slider/Slideshow with left and right button. No autoplay

.bxslider
{
    width:500px;
    height:500px;
    overflow:hidden;
    position:absolute;


}
.style17
 {

width: 800px;
height: 400px;
position:relative;

}

#next {
     width:10px;
    height:10px;
    z-index:99;
    cursor:pointer;
    text-align:center;
    line-height:50px;
    position:absolute;
    z-index:50;
     left:0;
    top:200px;

    opacity:.3;


}
#prev {
     width:10px;
    height:10px;
    z-index:50;
    cursor:pointer;
    text-align:center;
    line-height:50px;
    position:absolute;
    z-index:99;
     right:20px;
    top:200px;

    opacity:.3;

}
.style17:hover #next
 {
    opacity: 1;
    transition: all .5s ease-out;
}
.style17:hover #prev
 {
    opacity: 1;
    transition: all .5s ease-out;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->

<link href="jquery.bxslider.css" rel="stylesheet" />

     <script>
         $(function () {
             $(".bxslider").bxslider({
                 
             });
         });
  </script>

<div class="style17">

             <div id="next"><img src="images/Alarm-Arrow-Left-icon.png"></div>
             <div id="prev"><img src="images/Alarm-Arrow-Right-icon.png"></div>

                  <div  class="bxslider">

                   <img src="images/1.jpg" >
                   <img src="images/2.jpg" >
                   <img src="images/3.jpg" >
                   <img src="images/1.jpg" >

                   </div>

         </div>