how to make my slideshow responsive

May 8 2016 6:09 AM

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:<pre class="default prettyprint prettyprinted"><code> <div id="slideShow"></code></pre><pre class="default prettyprint prettyprinted"><code><div id="slideShowWindow"></code></pre><pre class="default prettyprint prettyprinted"><code><div class="slide"> <img src="../Images/golden.jpg"/></code></pre><pre class="default prettyprint prettyprinted"><code><div class="slideText"></code></pre><pre class="default prettyprint prettyprinted"><code><h2>Golden pearl</h2> This golden pearl came from a farm in the south china sea</code></pre><pre class="default prettyprint prettyprinted"><code></div> </div> </code></pre><pre class="default prettyprint prettyprinted"><code><div class="slide"><img src="../Images/zen.jpg"/> </code></pre><pre class="default prettyprint prettyprinted"><code><div class="slideText"></code></pre><pre class="default prettyprint prettyprinted"><code><h2>Simply Zen</h2> </code></pre><pre class="default prettyprint prettyprinted"><code>What else is there to say?!</code></pre><pre class="default prettyprint prettyprinted"><code></div> </code></pre><pre class="default prettyprint prettyprinted"><code></div> </code></pre><pre class="default prettyprint prettyprinted"><code><div class="slide"><img src="../Images/rain.jpg"/></code></pre><pre class="default prettyprint prettyprinted"><code><div class="slideText"><h2>Lariat In 'Rain'</h2> </code></pre><pre class="default prettyprint prettyprinted"><code>Lariat In 'Rain' motif using diamonds, white gold, Tahitian pearls, and silk.</code></pre><pre class="default prettyprint prettyprinted"><code></div> </code></pre><pre class="default prettyprint prettyprinted"><code></div> </code></pre><pre class="default prettyprint prettyprinted"><code></div> </code></pre><pre class="default prettyprint prettyprinted"><code></div> </code></pre>My css:<pre class="default prettyprint prettyprinted"><code>img {display: block;width: 100%;height: auto; }</code></pre><pre class="default prettyprint prettyprinted"><code> p{background:none;color:#ffffff; }</code></pre><pre class="default prettyprint prettyprinted"><code> #slideShow #slideShowWindow </code></pre><pre class="default prettyprint prettyprinted"><code>{width: 650px;height: 450px;margin: 0;padding: 0;position: relative;overflow:hidden;margin-left: auto;margin-right:auto; }</code></pre><pre class="default prettyprint prettyprinted"><code>#slideShow #slideShowWindow .slide </code></pre><pre class="default prettyprint prettyprinted"><code>{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; }</code></pre><pre class="default prettyprint prettyprinted"><code>.slideText </code></pre><pre class="default prettyprint prettyprinted"><code>{background: rgba(128, 128, 128, 0.49);text-align:center;bottom:0;padding:10px; }</code></pre><pre class="default prettyprint prettyprinted"><code>#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p </code></pre><pre class="default prettyprint prettyprinted"><code>{margin:10px;padding:15px; }.slideNav {display: block;text-indent: -10000px;position: absolute;cursor: pointer; } #leftNav </code></pre><pre class="default prettyprint prettyprinted"><code>{left: 0;bottom: 0;width: 48px;height: 48px;background-image: url("../Images/plus_add_minus.png");background-repeat: no-repeat;z-index: 10; }</code></pre><pre class="default prettyprint prettyprinted"><code> #rightNav </code></pre><pre class="default prettyprint prettyprinted"><code>{right: 0;bottom: 0;width: 48px;height: 48px;background-image: url("../Images/plus_add_green.png");background-repeat: no-repeat;z-index: 10; } .hiding</code></pre><pre class="default prettyprint prettyprinted"><code>{display:none; } .showing</code></pre><pre class="default prettyprint prettyprinted"><code>{display:block; }</code></pre>My jQuery:<pre class="default prettyprint prettyprinted"><code>$(document).ready(function () {</code></pre><pre class="default prettyprint prettyprinted"><code>var currentPosition = 0; </code></pre><pre class="default prettyprint prettyprinted"><code>var slides = $('.slide');</code></pre><pre class="default prettyprint prettyprinted"><code>var slideWidth = 650;</code></pre><pre class="default prettyprint prettyprinted"><code>var numberOfSlides = slides.length;</code></pre><pre class="default prettyprint prettyprinted"><code>var slideShowInterval;</code></pre><pre class="default prettyprint prettyprinted"><code>var speed = 3000;//Assign a timer, so it will run periodically</code></pre><pre class="default prettyprint prettyprinted"><code>slideShowInterval = setInterval(changePosition, speed);</code></pre><pre class="default prettyprint prettyprinted"><code>slides.wrapAll('<div id="slidesHolder"></div>');</code></pre><pre class="default prettyprint prettyprinted"><code>slides.css({ 'float': 'left' });//set #slidesHolder width equal to the total width of all the slides</code></pre><pre class="default prettyprint prettyprinted"><code>$('#slidesHolder').css('width', slideWidth * numberOfSlides);</code></pre><pre class="default prettyprint prettyprinted"><code>$('#slideShowWindow').prepend('Move Left').append('Move Right');</code></pre><pre class="default prettyprint prettyprinted"><code>manageNav(currentPosition);//tell the buttons what to do when clicked</code></pre><pre class="default prettyprint prettyprinted"><code>$('.slideNav').bind('click', function () {//determine new position</code></pre><pre class="default prettyprint prettyprinted"><code>currentPosition = ($(this).attr('id') === 'rightNav')? currentPosition + 1 : currentPosition - 1;//hide/show controls</code></pre><pre class="default prettyprint prettyprinted"><code>manageNav(currentPosition);</code></pre><pre class="default prettyprint prettyprinted"><code>clearInterval(slideShowInterval);</code></pre><pre class="default prettyprint prettyprinted"><code>slideShowInterval = setInterval(changePosition, speed);</code></pre><pre class="default prettyprint prettyprinted"><code>moveSlide();});</code></pre><pre class="default prettyprint prettyprinted"><code>function manageNav(position) </code></pre><pre class="default prettyprint prettyprinted"><code>{</code></pre><pre class="default prettyprint prettyprinted"><code>//hide left arrow if position is first slide</code></pre><pre class="default prettyprint prettyprinted"><code>if (position === 0) </code></pre><pre class="default prettyprint prettyprinted"><code>{$('#leftNav').hide();}</code></pre><pre class="default prettyprint prettyprinted"><code>else {$('#leftNav').show();}//hide right arrow is slide position is last slide</code></pre><pre class="default prettyprint prettyprinted"><code>if (position === numberOfSlides - 1) {$('#rightNav').hide();}else {$('#rightNav').show();}}</code></pre><pre class="default prettyprint prettyprinted"><code>//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked</code></pre><pre class="default prettyprint prettyprinted"><code>function changePosition() {if (currentPosition === numberOfSlides - 1) </code></pre><pre class="default prettyprint prettyprinted"><code>{currentPosition = 0;</code></pre><pre class="default prettyprint prettyprinted"><code>manageNav(currentPosition);</code></pre><pre class="default prettyprint prettyprinted"><code>} else {</code></pre><pre class="default prettyprint prettyprinted"><code>currentPosition++;</code></pre><pre class="default prettyprint prettyprinted"><code>manageNav(currentPosition);</code></pre><pre class="default prettyprint prettyprinted"><code>}</code></pre><pre class="default prettyprint prettyprinted"><code>moveSlide();}//moveSlide: this function moves the slide </code></pre><pre class="default prettyprint prettyprinted"><code>function moveSlide() {$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });}});</code></pre>Thanks in advanced for your help guys, if you have any questions or require further info let me know :)

Answers (1)

Detect browser back button

Jquery tables events