As a beginner in the world of coding, I decided to start my journey with Codecademy. Everything seemed to be going smoothly as I created a carousel image slider using JQuery. However, when I tried implementing the same code on jsfiddle, the slider became static and stuck on one image.
This is the JQuery code that I used:
$(document).ready(function() {
var $slider = $('.slider');
var $slide = 'img';
var $transition_time = 2500;
var $time_between_slides = 4000;
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
,$transition_time + $time_between_slides
);
});
The images for the slider are stored as follows:
<div id="jumbotron">
<div class="slider">
<img class="img" src="http://photos.travellerspoint.com/203325/Peru_239.jpg" width="100%">
<img class="img" src="https://c2.staticflickr.com/4/3367/5734521147_ab8fa45d8a.jpg" width="100%">
<img class="img" src="http://cdn.c.photoshelter.com/img-get/I0000aT96V0jJZX4/s/650/650/Alpaca-Wool-Factory-El-Alto-Bolivia-17.jpg" width="100%">
<img class="img" src="https://kitaliana.files.wordpress.com/2011/09/rug_cusco1.jpg" width="100%">
</div>
</div>
Having encountered this issue for the first time, I was at a loss on where to even begin troubleshooting. It's puzzling how the code worked perfectly in one environment but failed in another, despite being identical...