i am struggling to Make my slideshow responsive

Question

I hope you are all well on this fine day. I have made a slideshow but it is not responsive at this time, ie 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 :)

Answer 1

You can achieve a responsive slideshow much easier by just using a bootstrap carousel. You will need to add the following into your <head> tag in order to use bootstrap:

<!-- Bootstrap stylesheets and links -->
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- End of required Bootstrap stylesheets and links -->

And then use something like this for your carousel:

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Hope this helps!