Несколько слайдеров на странице, что править?

Question

[hsnz]

Ребята, привет.
У меня 3 слайдера на сайте, каждому присвоены свои ID, то есть:
#slider, #slider2, #slider3.
Но когда меняю все ID в JS на нужные, у меня все равно работает только один, сам код:

var slideNow = 1;
var slideCount = $('#slidewrapper').children().length;
var slideInterval = 3000;
var navBtnId = 0;
var translateWidth = 0;

$(document).ready(function() {
    var switchInterval = setInterval(nextSlide, slideInterval);

    $('#viewport').hover(function() {
        clearInterval(switchInterval);
    }, function() {
        switchInterval = setInterval(nextSlide, slideInterval);
    });

    $('#next-btn').click(function() {
        nextSlide();
    });

    $('#prev-btn').click(function() {
        prevSlide();
    });

    $('.slide-nav-btn').click(function() {
        navBtnId = $(this).index();

        if (navBtnId + 1 != slideNow) {
            translateWidth = -$('#viewport').width() * (navBtnId);
            $('#slidewrapper').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow = navBtnId + 1;
        }
    });
});


function nextSlide() {
    if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) {
        $('#slidewrapper').css('transform', 'translate(0, 0)');
        slideNow = 1;
    } else {
        translateWidth = -$('#viewport').width() * (slideNow);
        $('#slidewrapper').css({
            'transform': 'translate(' + translateWidth + 'px, 0)',
            '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
            '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
        });
        slideNow++;
    }
}

function prevSlide() {
    if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) {
        translateWidth = -$('#viewport').width() * (slideCount - 1);
        $('#slidewrapper').css({
            'transform': 'translate(' + translateWidth + 'px, 0)',
            '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
            '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
        });
        slideNow = slideCount;
    } else {
        translateWidth = -$('#viewport').width() * (slideNow - 2);
        $('#slidewrapper').css({
            'transform': 'translate(' + translateWidth + 'px, 0)',
            '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
            '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
        });
        slideNow--;
    }
}

Answer 1

[Froggyweb]

ID может быть на странице только один весь js завязан на конкретные ID

Comments

[hsnz]

В том и дело, как мне сделать JS На 2 слайдера? Если я дублирую и вставляю другие ID, то работает только один.

[hsnz]

Пример html кода

<div class="col-md-4 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
<div id="block-for-slider">
        <div id="viewport">
            <ul id="slidewrapper">
                <li class="slide"><img src="./img/Slider/1.jpg" alt="1" class="slide-img"></li>
                <li class="slide"><img src="./img/Slider/2.png" alt="2" class="slide-img"></li>
                <li class="slide"><img src="./img/Slider/3.jpg" alt="3" class="slide-img"></li>
            </ul>

            <div id="prev-next-btns">
                <div id="prev-btn"></div>
                <div id="next-btn"></div>
            </div>

            <ul id="nav-btns">
                <li class="slide-nav-btn"></li>
                <li class="slide-nav-btn"></li>
                <li class="slide-nav-btn"></li>
            </ul>
        </div>
    </div>
  </div>
  <div class="col-md-4 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div id="block-for-slider">
        <div id="viewport2">
            <ul id="slidewrapper2">
                <li class="slide"><img src="./img/Slider/1.jpg" alt="4" class="slide-img"></li>
                <li class="slide"><img src="./img/Slider/2.png" alt="5" class="slide-img"></li>
                <li class="slide"><img src="./img/Slider/3.jpg" alt="6" class="slide-img"></li>
            </ul>

            <div id="prev-next-btns2">
                <div id="prev-btn2"></div>
                <div id="next-btn2"></div>
            </div>

            <ul id="nav-btns2">
                <li class="slide-nav-btn2"></li>
                <li class="slide-nav-btn2"></li>
                <li class="slide-nav-btn2"></li>
            </ul>
        </div>
    </div>
  </div>

[Froggyweb]

hsnz:

<div id="prev-next-btns">
                <div id="prev-btn"></div>
                <div id="next-btn"></div>
            </div>

Откуда js знает к какому слайдеру это относится. он берет первый на странице

[hsnz]

Я тут просто HTML не правильно прикрепил.
На самом деле я ставил разные ID под каждый и все равно никак, или я что-то не понимаю?

<div id="prev-btn"></div>
<div id="next-btn"></div>

[Froggyweb]

ну ок вызывается функция nextslide() ты там тоже переменные меняешь к какому слайдеру это относится?

Либо возьми нормальный слайдер типа Slick или OWL либо делается функция-конструктор и инициализация разных слайдеров. Посмотри как это сделано у этих слайдеров.