I am currently developing a slideshow that updates Images, Title, and Description simultaneously based on their Array index.
The slideshow is functional BUT, my goal is to achieve a smooth transition to the next/previous Image (... title & description) when users click the "Next" and "Previous" buttons.
This can be implemented using either javascript or jquery.
Any assistance or recommendations would be greatly appreciated. Thank you.
Below is the provided HTML:
<div class="featured">
<div class="infofeat">
<div class="infocont">
<h1>FEATURED</h1>
<div id="feat_title">
First Title
</div>
<div id="description">
First Description
</div>
<div id="controllers">
<a id="_previous"href="#" onclick="return change_image(-1)" > Previous </a>
<a id="_next"href="javascript:change_image(1)" > Next </a>
</div>
</div>
</div>
<div class="picfeat">
<img src="images/designs/tempfeatured.jpg" name="slideshow" />
</div>
</div>
The slideshow's Javascript code is as follows:
var Image = new Array("images/designs/tempfeatured.jpg", "../images/designs/feat2.jpg", "../images/designs/feat3.jpg");
var Description = new Array ("First description", "Second Description", "Third Description");
var Title = new Array("First Title", "Second Title", "Third Title")
var Image_Number = 0;
var Image_Length = Image.length - 1;
function change_image(num){
Image_Number = Image_Number + num;
if (Image_Number > Image_Length){
Image_Number = 0;
}
if (Image_Number < 0){
Image_Number = Image_Length;
}
document.slideshow.src= Image[Image_Number];
document.getElementById("description").innerHTML = Description[Image_Number];
document.getElementById("feat_title").innerHTML = Title[Image_Number];
return false;
}
You can test the functionality on JsFiddle here . Thank you for your support.