How can I get multiple sliders to work on one page?

See more:

Javascript

HTML5

Hi All,

I have been trying to make two sliders for my products screen one for the image and other for information.

I can get one working however after taking the w3schools code for making sliders and adjusting it for 2 it seems to either crash out or just plainly not work for one of the sliders.

What I have tried:

I have tried adapting the code by changing all variables that I thought could be a factor to something different i.e. one might have leftSlides the other rightSlides.

HTML CODE

<div class="left-product slider-container">
        <div class="leftSlides fade">
            <div class="one">1111111</div>
            <img class="slider-img" src="">
        </div>
        <div class="leftSlides fade">
            <div class="two">dddd</div>
            <img class="slider-img"src="">
        </div>
        <div class="leftSlides fade">
            <div class="three">ASDASD</div>
            <img class="slider-img" src="">
        </div>
    </div>

    <div class="center-product"></div>

    <div class="right-product slider-container">
        <div class="rightSlides fade">
            <div class="one">1111111</div>
            <img class="slider-img" src="">
        </div>
        <div class="rightSlides fade">
            <div class="two">dddd</div>
            <img class="slider-img"src="">
        </div>
        <div class="rightSlides fade">
            <div class="three">ASDASD</div>
            <img class="slider-img" src="">
        </div>
    </div>

    <div class="left-product toggle-slide">
        <span class="slide-left slide-one" onclick="currentSlide(1)"></span>
        <span class="slide-left slide-two" onclick="currentSlide(2)"></span>
        <span class="slide-left slide-three" onclick="currentSlide(3)"></span>
    </div>

    <div class="right-product toggle-slide">
        <span class="slide-right slide-one" onclick="currentSlide(4)"></span>
        <span class="slide-right slide-two" onclick="currentSlide(5)"></span>
        <span class="slide-right slide-three" onclick="currentSlide(6)"></span>
    </div>

JavaScript

var leftslideIndex = 1;
var rightslideIndex = 4;
leftSlides(leftslideIndex);
leftSlides(rightslideIndex);

function currentSlide(n) {
    leftSlides(leftslideIndex = n);
    rightSlides(rightslideIndex = n);
}

function leftSlides(n) {
    var i;
    var slides = document.getElementsByClassName("leftSlides");
    var dots = document.getElementsByClassName("slide-left");
    if (n > slides.length) {leftslideIndex = 1}
    if (n < 1) {leftslideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[leftslideIndex-1].style.display = "block";
    dots[leftslideIndex-1].className += " active";
}

function rightSlides(n) {
    var j;
    var rightslides = document.getElementsByClassName("rightSlides");
    var rightdots = document.getElementsByClassName("slide-right");
    if (n > rightslides.length) {rightslideIndex = 1}
    if (n < 1) {rightslideIndex = rightslides.length}
    for (j = 0; j < rightslides.length; j++) {
        rightslides[j].style.display = "none";
    }
    for (j = 0; j < rightdots.length; j++) {
        rightdots[j].className = rightdots[j].className.replace(" active", "");
    }
    rightslides[rightslideIndex-1].style.display = "block";
    rightdots[rightslideIndex-1].className += " active";
}

Any help on this would be greatly appreciated.

Thanks for looking,
Ben :)