jquery - Images get cut in a slide show on resizing -

i trying make slide show images cuts when resize screen how can make responsive..i want thing done in javascript code,i have try width of container , resize images accordingly not working

<div class="container">         <div class="row" style="width: 100%; margin-left: 0px;">             <div id="slider">                 <ul class="slides">                     <li>                         <img class="slide img-responsive" src="images/free1.jpg" /></li>                     <li>                         <img class="slide img-responsive" src="images/free2.jpg" /></li>                     <li>                         <img class="slide img-responsive" src="images/free3.jpg" /></li>                     <li>                         <img class="slide img-responsive" src="images/free4.jpg" /></li>                     <li>                         <img class="slide img-responsive" src="images/free5.jpg" /></li>                     <li>                         <img class="slide img-responsive" src="images/free1.jpg" /></li>                  </ul>              </div>           </div>       </div>   $(document).ready(function () {     var width = 1160;     var animationspeed = 2000;     var pause = 1000;     var currentslide = 1;       var $slider = $('#slider');     var $slidecontainer = $slider.find('.slides');     var $slides = $slidecontainer.find('.slide');     var interval;     /*     function get_width(width) {         if (window.matchmedia("(min-width: 450px)").matches) {             width == 450;         } else if (window.matchmedia("(min-width: 750px)").matches) {              width == 700;          } else {              width == 1160;          }          return width;      }*/     function startslider() {          interval = setinterval(function () {              $slidecontainer.animate({ 'margin-left': '-=' + width  }, animationspeed, function () {                 currentslide++;                 if (currentslide == $slides.length) {                     currentslide = 1;                     $slidecontainer.css('margin-left', 0);                 }               });          }, pause);     }     function stopslider() {          clearinterval(interval);     }     //listen mouse enter , pause     $slider.on('mouseenter', stopslider).on('mouseleave', startslider);         startslider();    });     #slider { width:100%; height:400px;   overflow:hidden;    }     #slider .slides {     display:block;     width:8000px;     height:400px;     margin:0;     padding:0;         }     #slider .slide {     float:left;     list-style-type:none;    width:1160px;    height:400px;         }   li { list-style-type:none; } 

you can use max-width: 100%; <img>. example:

.slides img {   max-width: 100%; } 

edit

if want set image width based on #slider width, can use this:

$('.slide').each(function() {   $(this).width($('#slider').width()); }); 

and if want re-set images when window resized, can handle window resize event. example:

$(window).resize(function() {     $('.slide').each(function() {       $(this).width($('#slider').width());     }); });