jQuery Responsive Image Rotator

Let's create a simple responsive image rotator with jQuery cycle plugin, with next previous button.
You can download cycle plugin js file from here.




HTML Code:

<div class="slider">
<ul id="slider1">
<li><img src="images/img1.jpg" alt="" /></li>
<li><img src="images/img2.jpg" alt="" /></li>
<li><img src="images/img3.jpg" alt="" /></li>
<li><img src="images/img4.jpg" alt="" /></li>
<li><img src="images/img5.jpg" alt="" /></li>
<li><img src="images/img6.jpg" alt="" /></li>
<li><img src="images/img7.jpg" alt="" /></li>
</ul>
<div id='next' class="slider_next"><img src="images/prev.png" alt=""/></div>
<div id='prev' class="slider_prev"><img src="images/next.png" alt=""/></div>
</div>

jQuery Code

function slideShow(){
   $('#slider1') .cycle({
   fx: 'fade',
   speed: 'slow', 
   timeout: 0,
   next: '#next', 
   prev: '#prev',
   slideResize: false,
   containerResize: false,
   width: '100%',
   fit: 0,
  });
}

$(document).ready(function(){
   var MaxHeight = $("li").height();
   $(".slider").height(MaxHeight+'px');
   slideShow();
}); 

$(window).resize(function(){
   var MaxHeight = $("li").height();
   $(".slider").height(MaxHeight+'px');
})

CSS Code

.slider{
  margin: 0 auto; 
  border: 8px solid #FFFFFF;
  border-radius:5px;
  box-shadow: 2px 2px 4px #333333; 
  position: relative; 
  max-width: 625px;
}

/* To make the image responsive */
#slider1 img{ 
  width:100%; 
  height: auto; 
  margin-bottom: -4px; 
}

.slider_next{
   width: 62px;
   height: 62px;
   background: #f8f8f8; 
   border-radius: 70px;
   position: absolute;
   z-index: 99;
   top: 50%;
   left: -36px;
   padding: 5px 0 0 5px; 
   cursor: pointer;
   margin-top:-28px; 
}

.slider_prev{
   width: 62px;
   height: 62px;
   background: #f8f8f8; 
   border-radius: 70px;
   position: absolute;
   z-index: 99;
   top: 50%;
   right: -36px;
   padding: 5px 0 0 5px; 
   cursor: pointer;
   margin-top:-28px;
}
/* To make the gallery responsive */

@media only screen and (max-width: 696px) {
.slider_next{
   width: 40px;
   height: 40px; 
   left:0px; 
   margin-top:-20px;
   padding: 2px;
}

.slider_prev{
   width: 40px;
   height: 40px; 
   right:0px; 
   margin-top:-20px; 
   padding: 2px;
}
.slider_next img, .slider_prev img{ 
   width:100%; 
   height:auto;
}
} // Closing tag for @media