jqueryhtmlcssslideshow

A basic jQuery slider is not sliding through images properly

The problem I am having is that it just shows 2-3 images quickly and then stops sliding through images, it just stops at one pic.

HTML

<script type="text/javascript">
jQuery("#slideshow > div:gt(0)").hide();

setInterval(function() {
  jQuery('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);
</script>
<LINK REL=StyleSheet HREF="slideshow.css" TYPE="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>



<body>
<div id="slideshow" style="align:center;">

   <div>
     <img src="htc-touch-diamond-versus-iphone-3g.jpg" width="800px" height="400px">
   </div>

   <div>
     <img src="iphone_ipad.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-3gs.jpg" width="800px" height="400px">
   </div>


<div>
     <img src="iphone3gs_3up.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-4g-mockup-von-rino0815.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-water1.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="Mobiles-iPhone-Repair.jpg" width="800px" height="400px">
   </div>

<div>
     <img src="steve-jobs-holding-iphone.jpeg" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-3g-preview.png" width="800px" height="400px">
   </div>

<div>
     <img src="iphone-sparks.png" width="800px" height="400px">
   </div>




</div>
</body>

slideshow.css

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 800px; 
    height: 400px; 
    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; 
}

Edit

I placed my jQuery code in an external JS file and I am referring to that file in my html like this

<LINK REL=StyleSheet HREF="slideshow.css" TYPE="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript" src="slideshow.js">
</SCRIPT>

<div id="slideshow" style="align:center;">

   <div>
     <img src="htc-touch-diamond-versus-iphone-3g.jpg" width="800px" height="400px">
   </div>

It is still not working and showing this error now...

("#slideshow > div:gt(0)").hide() doesn't exist

and this is my new JS file:

$(document).ready(function(){

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

setInterval(function() {
  jQuery('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);
});

It sometimes also give a reference error on $ saying "$ not defined"

Edit 2

I have pasted all of my code here. These 3 files ie for HTML, css and js.

Where am I going wrong? Which statements need to come after what?

Solution

  • I solved the problem. It was with js file. Here's the code. 

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