Question

as I was trying to do a slideshow with the help of CSS and jQuery (actually ripped it off a tutorial..), i realized that only the last picture is showing, and the slideshow is not “rotating”
I have the css:

#home{
    color: #e3e3e3;
    margin: 0 auto;
    height: 30%;
    width: 30%;
    position: relative;
    top: 5%;
    opacity: 1;
    text-align: justify;}
#slideshow {
    margin: 0px auto;
    position: relative;
    top: 2%;
    width: 500px;
    height: 350px;
    padding: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;}

the jQuery :

$(document).ready(function(){
  $("#slideshow > div:gt(0)").hide();
  setInterval(function() {
    $("#slideshow > div:first")
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo("#slideshow");
  },3000);
}

and the html :

<div id="home">
<div id="slideshow">
<div>
    <img src="./images/mulsanne.jpg" title="Black Mulsanne by ProTech" alt="Black Mulsanne" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/murcielago.jpg" title="Orange Lamborghini Murcielago by ProTech" alt="Orange Murcielago" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/BrabusK8.jpg" title="Black Brabus K8 by ProTech" alt="Black K8" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/superleggera.jpg" title="Grey Lamborghini Superleggera by ProTech" alt="Grey Superleggera" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/slr.jpg" title="Black Mercedes SLR by ProTech" alt="Black SLR" style="height:350px;width=500px"/>
</div>
</div>
<br>
Represented in more than XX countries, and exclusive distributor in Kazakhstan since 2009, ProTech's aim is to offer the best services in terms of car paint protection and windows enhancements, with exclusive Kevlar-coated films with various effects.<br>
Find more about us by clicking on the 2 buttons on the left side of this webpage !
</div>

(the last lines of text are under the slideshow, it’s just to show you the reason why i have a div id’ed “#home”)

any idea why this is not working??

Answer 1

Your code seems to work fine here http://jsfiddle.net/yRJ2e/

You have syntax errors in your image tag style- width uses “=” and should be “:”

 style="height:350px;width=500px"

Should be:

 style="height:350px;width:500px"