Как заставить несколько слайдеров работать на одной странице?

---

Всем Привет,

Я пытался сделать два ползунка для экрана моих продуктов-один для изображения, а другой для информации.

Я могу заставить его работать, однако после того, как я взял код w3schools для создания слайдеров и настроил его на 2, он, кажется, либо выходит из строя, либо просто не работает для одного из слайдеров.

Что я уже пробовал:

Я попытался адаптировать код, изменив все переменные, которые, как мне казалось, могли бы быть фактором, на что-то другое, то есть один из них мог бы быть левым, а другой-правым.

HTML-код

<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";
}

Любая помощь в этом вопросе будет очень признательна.

Спасибо что посмотрели,
Бен :)

---

leftSlides(leftslideIndex);
leftSlides(rightslideIndex);