I have created a basic slideshow that can accommodate multiple images. Clicking on an image should move to the next slide, and once the last image is clicked, it should loop back to the first slide.
The functionality of transitioning between slides seems to work fine when returning to the first slide. However, I am facing issues implementing a CSS fade transition during each slide change.
I suspect there might be something missing in my CSS code. Any suggestions on what could be causing this problem?
Here's the Fiddle link for reference: http://jsfiddle.net/databass/76nZ7/13/
Below is the HTML, JavaScript, and CSS code snippets. Thank you!
HTML:
<div class="content">
<img src="http://b.vimeocdn.com/ts/254/218/254218511_640.jpg" width="640" height="360" />
</div>
<div class="content notcurrent">
<img src="http://b.vimeocdn.com/ts/254/218/254218512_640.jpg" width="640" height="360" />
</div>
<div class="content notcurrent">
<img src="http://b.vimeocdn.com/ts/254/218/254218513_640.jpg" width="640" height="360" />
</div>
JavaScript:
/*
When the page loads, execute a function that assigns a sequence to each child slide
When a slide is clicked, the next slide will appear.
On page load, the first slide will be shown
Each slide should transition with fade-out/fade-in
*/
(function () {
var slides = document.getElementsByClassName("content");
slides[0].style.display = 'block';
//convert collection of slide elements to an actual Array, and iterate through each slide
Array.prototype.slice.call(slides).forEach(function (slideElement, slideSequence) {
//execute this function for each slide.
(function () {
// helper function to get the slide sequence.
// return 0 if we've gone through eevery slide
var getNextSequence = function () {
if (slideSequence + 1 === slides.length) {
return 0;
} else {
return slideSequence + 1;
}
}
// add a listener to each slide.
slides[slideSequence].addEventListener("click", function () {
slides[slideSequence].className = 'content notcurrent';
slides[getNextSequence(slideSequence)].className = 'content current';
});
})();
});
})()
CSS:
.content {
width: 640px;
height: 360px;
position: absolute;
top: 0;
left: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.notcurrent {
-moz-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
display: none;
}
.current {
-moz-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}