Responsive image slideshow

See more:

Javascript

CSS

HTML

I want a responsive image slideshow for my asp.net webpage. what i have now works but I find it difficult making it responsive. Please help.

What I have tried:

<div>
    <div id="slideshow">
<div id="slideshowWindow">

<div class="slide">

<div class="one"></div>
</div>

<div class="slide">

<div class="two"></div>
</div>

<div class="slide">

<div class="three"></div>
</div>

<div class="slide">

<div class="four"></div>
</div>

</div>
</div>
    </div>

<style>
   
 #slideshow {
position: relative;
    top: 0px;
    left: 0px;
    width: 500px;
  
    margin-left :2%;
}
#slideshow #slideshowWindow {
height: 350px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
  
}
#slideshow #slideshowWindow .slide {
height: 350px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}

#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
top:90%;
left:0;
width:100px;
height:50px;
background-image:url(images/back.jpg');
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:90%;
left:335px;
width:100px;
height:50px;
background-image:url(images/forward.jpg');
background-repeat:no-repeat;
z-index:999;
}    
.one{background-color:green; width:100%;height:500px;}
.two{background-color:yellow;width:100%;height:500px;}
.three{background-color:red;width:100%;height:500px;} 
.four{background-color:blue; width:100%;height:500px;}   
        
</style>


<script>
      $( function slideshow () {
 
      
    var currentPosition = 0;
   var slideWidth =500;
 
            
            var slides = $('.slide');
            slides.css('width', slideWidth);
    
      var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 2000;
    //Assign a timer, so it will run periodically
    slideShowInterval = setInterval(changePosition, speed);
    slides.wrapAll('<div id="slidesHolder"></div>')
    slides.css({ 'float': 'left'
    });
    //set #slidesHolder width equal to the total width of all the slides
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);
    $('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
    manageNav(currentPosition);
    //tell the buttons what to do when clicked
    $('.nav').bind('click', function () {
        //determine new position
        currentPosition = ($(this).attr('id') == 'rightNav') ? currentPosition + 1 : currentPosition - 1;
        //hide/show controls
        manageNav(currentPosition);
        clearInterval(slideShowInterval);
        slideShowInterval = setInterval(changePosition, speed);
        moveSlide();
    });
    function manageNav(position) {
        if (position == 0) {
            $('#leftNav').hide()
        }
        else {
            $('#leftNav').show()
        }
        if (position == numberOfSlides - 1) {
            $('#rightNav').hide()
        }
        else { $('#rightNav').show() }
    }
    function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
            manageNav(currentPosition);
        }
        else {
            currentPosition++;
            manageNav(currentPosition);
        }
        moveSlide();
    }
    function moveSlide() {
        $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
    };
});
    </script>