Shen Hui Zhang Shen Hui Zhang - 3 months ago 22
HTML Question

Random Image Slider (JS)

I have an image slider.

Unfortunately,
The image slider gets stuck on the second image.

I want the image slider to cycle through images in an infinite random loop.

How do I do this?

Here is my jsfiddle:

http://jsfiddle.net/rAqcP/248/

---------------------------------------

JS Code

$(document).ready(function() {

//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide',{direction:'right'},500);
$('.slider #1').delay(5500).hide('slide',{direction:'left'},500);

var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;

setInterval(function () {

//$('.slider #' + counterIndex).show({right:'0'}, 500);
$('.slider #' + counterIndex).show('slide',{direction:'right'},500);
$('.slider #' + counterIndex).delay(5500).hide('slide',{direction:'left'},500);

if(count==slidecount){
count=1;

}else{
count=count+1;
}
},6500);});


DIV CODE

<div class = "slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png"/>
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png"/>
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png"/>
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png"/>
</div>


CSS CODE

.slider {
width: 20%;
height: 30%;
overflow:hidden;
border: 1px solid black;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;
}

.slider img {
display:none;
}

Answer

You never define slidecount. It is used only in your if statement. You never define count. Its first use is in the same if statement.

I'm not sure if you did so, but you can watch the console output (keyboard shortcut F12) to see what errors occur in your code. In your original code the error was that count was undefined. It only shows the first error, so it would have shown an error about slidecount after you fixed the one with count.

Note: There was nothing in your code that was random. So, I am unsure as to what you were intending to make random.

The following will work (JSFiddle):

$(document).ready(function() {

  //$('.slider #1').show({right:'0'}, 500);
  $('.slider #1').show('slide', {
    direction: 'right'
  }, 500);
  $('.slider #1').delay(5500).hide('slide', {
    direction: 'left'
  }, 500);

  var sliderTotalImg = $('.slider img').size();
  var counterIndex = 2;
  var slidecount = 4;

  setInterval(function() {

    //$('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).show('slide', {
      direction: 'right'
    }, 500);
    $('.slider #' + counterIndex).delay(5500).hide('slide', {
      direction: 'left'
    }, 500);

    if (counterIndex >= slidecount) {
      counterIndex = 1;

    } else {
      counterIndex++;
    }
  }, 6500);
});
.slider {
  width: 20%;
  height: 30%;
  overflow: hidden;
  border: 1px solid black;
  background-image: url("http://test.softvex.com/Slider/Img/loading.gif");
  background-repeat: no-repeat;
  background-position: center;
}
.slider img {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider">
  <img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png" />
  <img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png" />
  <img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png" />
  <img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png" />
</div>