SlideShow Too Fast!


#1

Hi,
This problem doesn't relate to any particular exercise available in CodeAcademies long list of Lessons and Courses available - but instead, is a problem I am facing whilst build me Own Website.

The Problem is that I am creating an automatic slideshow for my personal website but in simple terms, the slideshow is too fast - each image/slide changes too quickly - so when I place a small paragraph as captions for each of the images present in the slideshow, it gonna be too fast to be able to read the whole caption.


HTML Lines of Code:

<div id="slideshow">
   <div>
     <img style="height: 500px; width:1000px;" src="https://s17.postimg.org/pus7x3qz3/Image_4-19-17_at_8.38_AM.jpg">
   </div>
   <div>
     <img style="height: 500px; width:1000px;" src="https://www.hrw.org/sites/default/files/styles/open_graph/public/media/images/photographs/RTR4SWTA.jpg?itok=x1RvHT_l">
       
   </div>
</div>

CSS Lines of Code:

<style>
#slideshow { 
    margin: 2px; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
    </style>

JavaScript Lines of Code:

<script>
    $("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#slideshow');
},  3000);
    </script>

So Here's what I would like help in doing:

  • Making the Slideshow change it's size Slower.

  • Could someone if possible tell me why my Images - placed in the slide show don't appear in the same size as each other - ones bigger than the other.

Thank You
Regards
Satanshu


#2

Here, the last argument you pass to the setInterval function determines the delay between changing images. Try increasing the value (1000 = 1 second).

Regarding images - I believe you need to adjust them. For instance, there is a whitespace at the bottom of the first one.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.