javascript - jQuery carousel making responsive -

i have carousel not responsive , need make responsive not sure current carousel ive found online ive been using.

can maybe me responsive? going images - many in advance

http://codepen.io/anon/pen/rnpyqq

html:

<div id="slider">   <a href="#" class="control_next">></a>   <a href="#" class="control_prev"><</a>   <ul>     <li><img src="http://placehold.it/1130x775"></li>     <li><img src="http://placehold.it/1130x775"></li>     <li><img src="http://placehold.it/1130x775"></li>     <li><img src="http://placehold.it/1130x775"></li>   </ul>   </div> 

js:

jquery(document).ready(function ($) {      setinterval(function () {         moveright();     }, 3000);      var slidecount = $('#slider ul li').length;     var slidewidth = $('#slider ul li').width();     var slideheight = $('#slider ul li').height();     var sliderulwidth = slidecount * slidewidth;      $('#slider').css({ width: slidewidth, height: slideheight });      $('#slider ul').css({ width: sliderulwidth, marginleft: - slidewidth });      $('#slider ul li:last-child').prependto('#slider ul');      function moveleft() {         $('#slider ul').animate({             left: + slidewidth         }, 200, function () {             $('#slider ul li:last-child').prependto('#slider ul');             $('#slider ul').css('left', '');         });     };      function moveright() {         $('#slider ul').animate({             left: - slidewidth         }, 200, function () {             $('#slider ul li:first-child').appendto('#slider ul');             $('#slider ul').css('left', '');         });     };      $('a.control_prev').click(function () {         moveleft();     });      $('a.control_next').click(function () {         moveright();     });  });     

css:

@import url(http://fonts.googleapis.com/css?family=open+sans:400,300,600);    html {   border-top: 5px solid #fff;   background: #58ddaf;   color: #2a2a2a; }  html, body {   margin: 0;   padding: 0;   font-family: 'open sans'; }  h1 {   color: #fff;   text-align: center;   font-weight: 300; }  #slider {   position: relative;   overflow: hidden;   margin: 20px auto 0 auto;   border-radius: 4px; }  #slider ul {   position: relative;   margin: 0;   padding: 0;   height: 200px;   list-style: none; }  #slider ul li {   position: relative;   display: block;   float: left;   margin: 0;   padding: 0;   width: 1130px;   height: 775px;   background: #ccc;   text-align: center;   line-height: 300px; }  a.control_prev, a.control_next {   position: absolute;   top: 40%;   z-index: 999;   display: block;   padding: 4% 3%;   width: auto;   height: auto;   background: #2a2a2a;   color: #fff;   text-decoration: none;   font-weight: 600;   font-size: 18px;   opacity: 0.8;   cursor: pointer; }  a.control_prev:hover, a.control_next:hover {   opacity: 1;   -webkit-transition: 0.2s ease; }  a.control_prev {   border-radius: 0 2px 2px 0; }  a.control_next {   right: 0;   border-radius: 2px 0 0 2px; }  .slider_option {   position: relative;   margin: 10px auto;   width: 160px;   font-size: 18px; } 

update: have made css 100% in width , height aut js needs work think , dont know here sets ontainer height , width margin stuff move etc... can me please?

you can calculate li's width using document's width , width of ul taken care of.

js

    //get width of document here , set li     $('#slider ul li').css({"width":($(document).width()-200)});      var slidecount = $('#slider ul li').length;     var slidewidth = $('#slider ul li').width();     var slideheight = $('#slider ul li').height();     var sliderulwidth = slidecount * slidewidth;      $('#slider').css({ width: slidewidth, height: slideheight });       $('#slider ul').css({ width: sliderulwidth, marginleft: - slidewidth }); 

css

#slider ul li {       /* other css */      height: 100%;    } 

and image responsive respect parent

#slider ul li img {   max-width: 100%;  max-height: 100%; } 

demo

on window resize updated fiddle