CODEWITHSUNDEEP
javascripthtmlcssslideshow
Taolin
Taolin

Reputation: 91

Why simple slideshow doesn't work?

I just created this slideshow just to check if it works before I change it according to my own site but the slideshow just doesn't seem to work. The images are all displayed one below the other.

Here's the JS Fiddle Could someone please help me find out why it won't work? Is it something wrong with the way I linked it? Or maybe the code is wrong?

<script> 
var step = 1 
function SlideShow(){ 
  if(!document.images) 
    return document.images.MySlide.src = eval("image"+step+".src") 
  if(step<4) 
    step++ 
  else
    step=1 
  setTimeout("SlideShow()",1000) 
} 
SlideShow() 
</script>

I used this code as well but it still didn't work.

Upvotes: 1

Views: 527

Answers (3)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7542

I've corrected some parts of your code and it works here.

Here is the original version of the code:

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

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

And here is the corrected one:

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

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

Corrections

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

  2. $('slideshow> div:first') => $('#slideshow> div:first')

Upvotes: 0

reuelab
reuelab

Reputation: 1986

There are typo and syntax errors in your script.

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

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

I've changed it to this: 

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

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

WORKING SAMPLE

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

You have syntax error in your css class.

Instead of this

#slideshow {
    margin: 50px auto;
    position: relative;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    width="600px";
    height="400px"
}

use this:

#slideshow {
    margin: 50px auto;
    position: relative;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    width:600px;
    height:400px;
    overflow:hidden;
}

Upvotes: 1

Related Questions