How to make this gallery responsive? [pending]

jQuery(document).ready(function ($) {

  $('#checkbox').change(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();
    });

});    

$('.control_prev').click(function(e) {
    e.preventDefault();
});
$('.control_next').click(function(e) {
    e.preventDefault();
});

$('.expandmissao').click(function(e) {
    e.preventDefault();
});

#slider {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
 width:38.3em;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  width:613px;
  height:330px;
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#slider ul li img {
width:100%; }
#slider ul li .title{
  width:100%;
  height:50px;
  position:absolute;
  bottom:0;
  background: rgba(224, 232, 218, 0.8);
  z-index: 99;
  line-height: 10px;
  text-align:right;
  color:#fff;
  font-weight: bold;
}

#slider ul li h4{
  padding-right: 15px;
  color:#a24480;
  font-family: 'Gotham-Black';
  font-size: 15.29pt;
}

#slider ul li h1{
  width:30px;
  height:30px;
  background: #000;
  padding:10px;
  color:#000;
  display: block;
}


a.control_prev{
  position:absolute;
  bottom:0;
  z-index: 999;
  display: block;
  width: 60px;
  height: 50px;
  background: url('http://i.imgur.com/xYajajx.png')no-repeat;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

 a.control_next {
  background: url('http://i.imgur.com/ZFX35Fd.png')no-repeat;
  position:absolute;
  bottom:0;
  left:9.5%;
  z-index: 999;
  display: block;
  width: 60px;
  height: 50px;
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="slider">
		  <a href="#" class="control_next"></a>
		  <a href="#" class="control_prev"></a>
		  <ul>
		    <li><img src="http://i.imgur.com/2fpRqwd.png"><divclass="title"><h4>Titulo</h4></div></li>
		    <li><img src="http://i.imgur.com/2fpRqwd.png"><divclass="title"><h4>Titulo</h4></div></li>
		    <li><img src="http://i.imgur.com/2fpRqwd.png"><divclass="title"><h4>Titulo</h4></div></li>
		    <li><img src="http://i.imgur.com/2fpRqwd.png"><divclass="title"><h4>Titulo</h4></div></li>
		  </ul>  
		</div>