how to make my slideshow responsive

I hope you are all well on this fine day. I have made a slideshow but it is not responsive at this time, i.e. not shrinking down on smaller browser window.

It is because of my height and width declarations in the css but when I change them to percentages it stops my slideshow from working. Any hints or tips anyone can offer would be gratefully received.

My html:

     <div id="slideShow">

<div id="slideShowWindow">

<div class="slide">
<img src="../Images/golden.jpg"/>

<div class="slideText">

<h2>Golden pearl</h2> <p>This golden pearl came from a farm in the south china sea</p>

</div> <!-- </slideText> --></div><!-- </slide> repeat as many times as needed --> 

<div class="slide"><img src="../Images/zen.jpg"/> 

<div class="slideText">

<h2>Simply Zen</h2> 

<p>What else is there to say?!</p>

</div> <!-- </slideText> -->

</div><!-- </slide> repeat as many times as needed --> 

<div class="slide"><img src="../Images/rain.jpg"/>

<div class="slideText"><h2>Lariat In 'Rain'</h2> 

<p>Lariat In 'Rain' motif using diamonds, white gold, Tahitian pearls, and silk.</p>

</div> <!-- </slideText> -->

</div><!-- </slide> repeat as many times as needed --> 

</div> <!-- </slideShowWindow> -->

</div> <!-- </slideshow> -->

My css:

img {display: block;width: 100%;height: auto;
}

p{background:none;color:#ffffff;
}

#slideShow #slideShowWindow 

{width: 650px;height: 450px;margin: 0;padding: 0;position: relative;overflow:hidden;margin-left: auto;margin-right:auto;
}

#slideShow #slideShowWindow .slide 

{margin: 0;padding: 0;width: 650px;height: 450px;float: left;position: relative;margin-left:auto;margin-right: auto;}#slideshow #slideshowWindow .slide{position:absolute;bottom:18px;left:0;width:100%;height:auto;margin:0;padding:0;color:#ffffff;font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}

.slideText 

{background: rgba(128, 128, 128, 0.49);text-align:center;bottom:0;padding:10px;
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p 

{margin:10px;padding:15px;
}.slideNav {display: block;text-indent: -10000px;position: absolute;cursor: pointer;
}
#leftNav 

{left: 0;bottom: 0;width: 48px;height: 48px;background-image: url("../Images/plus_add_minus.png");background-repeat: no-repeat;z-index: 10;
}

#rightNav 

{right: 0;bottom: 0;width: 48px;height: 48px;background-image: url("../Images/plus_add_green.png");background-repeat: no-repeat;z-index: 10;
}
.hiding

{display:none;
}
.showing

{display:block;
}

My jQuery:

$(document).ready(function () {

var currentPosition = 0;    

var slides = $('.slide');

var slideWidth = 650;

var numberOfSlides = slides.length;

var slideShowInterval;

var speed = 3000;//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);

$('#slideShowWindow').prepend('<span class="slideNav" id="leftNav">Move Left</span>').append('<span class="slideNav" id="rightNav">Move Right</span>');

manageNav(currentPosition);//tell the buttons what to do when clicked

$('.slideNav').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) 

{

//hide left arrow if position is first slide

if (position === 0) 

{$('#leftNav').hide();}

else {$('#leftNav').show();}//hide right arrow is slide position is last slide

if (position === numberOfSlides - 1) {$('#rightNav').hide();}else {$('#rightNav').show();}}

//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked

function changePosition() {if (currentPosition === numberOfSlides - 1) 

{currentPosition = 0;

manageNav(currentPosition);

} else {

currentPosition++;

manageNav(currentPosition);

}

moveSlide();}//moveSlide: this function moves the slide 

function moveSlide() {$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });}});

Thanks in advanced for your help guys, if you have any questions or require further info let me know :)