Change slider's next and previous button to be previews of upcoming or previous pictures
I have a slider and I need to change the next and previous button backgrounds to show a preview of the next and previous slide.
I don't know if it's possible without jQuery but since I'm working on an all JavaScript slider I'd very much appreciate a JavaScript solution
This is the HTML
And the Javascript
nrSlide=3;
function Load(){
nrShown = 0;
vect = new Array(nrSlide + 1);
vect[0] = document.getElementById("slide1");
vect[0].style.visibility = "visible";
for (var i = 1; i < nrSlide; i++)
{
vect[i] = document.getElementById("slide" + (i+1));
}
}
function next(){
nrShown++;
if(nrShown == nrSlide) {
nrShown=0;
}
Effect();
}
function prev(){
nrShown--;
if(nrShown == -1) {
nrShown = nrSlide -1;
}
Effect();
}
// Effect
function Effect(){
for (var i=0; i < nrSlide; i++){
vect[i].style.opacity = "0";
vect[i].style.visibility = "hidden";
}
vect[nrShown].style.opacity = "1";
vect[nrShown].style.visibility = "visible";
}