SlideShow Too Fast!


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">
     <img style="height: 500px; width:1000px;" src="">
     <img style="height: 500px; width:1000px;" src="">

CSS Lines of Code:

#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; 

JavaScript Lines of Code:

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

setInterval(function() { 
  $('#slideshow > div:first')
},  3000);

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


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.


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