Как корректно поместить два слайдера на 1 страницу?

Question

[heraldry]

Здравствуйте.
Беру слайдер по этой ссылке, нужно на одной странице сайта поместить два таких слайдера.
nisnom.com/veb-razrabotki/slajd-shou-s-razdelennym...

Пока что удалось поставить два слайдера на одну страницу, НО пока не закончится карусель на первом слайдере, на втором она не начнется. А нужно, чтобы на этих 2 слайдерах параллельно шли свои отдельные слайдшоу.
— Через id и class вроде пробовала, ничего не выходит.
Помогите пожалуйста, уже никаких идей нет...

Answer 1

[Егор Живагин]

Код запуска слайдера в студию

Comments

[heraldry]

var $slides = void 0,
    interval = void 0,
    $selectors = void 0,
    $btns = void 0,
    currentIndex = void 0,
    nextIndex = void 0;

var cycle = function cycle(index) {
    var $currentSlide = void 0,
        $nextSlide = void 0,
        $currentSelector = void 0,
        $nextSelector = void 0;

    nextIndex = index !== undefined ? index : nextIndex;

    $currentSlide = $($slides.get(currentIndex));
    $currentSelector = $($selectors.get(currentIndex));

    $nextSlide = $($slides.get(nextIndex));
    $nextSelector = $($selectors.get(nextIndex));

    $currentSlide.removeClass("active").css("z-index", "0");

    $nextSlide.addClass("active").css("z-index", "1");

    $currentSelector.removeClass("current");
    $nextSelector.addClass("current");

    currentIndex = index !== undefined ? nextIndex : currentIndex < $slides.length - 1 ? currentIndex + 1 : 0;

    nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0;
};

$(function () {
    currentIndex = 0;
    nextIndex = 1;

    $slides = $(".slide");
    $selectors = $(".selector");
    $btns = $(".btn");

    $slides.first().addClass("active");
    $selectors.first().addClass("current");

    interval = window.setInterval(cycle, 6000);

    $selectors.on("click", function (e) {
        var target = $selectors.index(e.target);
        if (target !== currentIndex) {
            window.clearInterval(interval);
            cycle(target);
            interval = window.setInterval(cycle, 6000);
        }
    });

    $btns.on("click", function (e) {
        window.clearInterval(interval);
        if ($(e.target).hasClass("prev")) {
            var target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1;
            cycle(target);
        } else if ($(e.target).hasClass("next")) {
            cycle();
        }
        interval = window.setInterval(cycle, 6000);
    });
});

Answer 2

[maxsnw]

раздели их между собой классами и инициализируй при загрузке документа, они поди у тебя инициализируются как один.

$(document).ready(function() {
$('slider-class1, slider-class2').sliderName();
});

Comments

[heraldry]

Да, как один. А не подскажете где конкретно это нужно прописывать в данном коде?
Как я понимаю, это нужно прописывать где-то здесь:
$slides = $(".slide");

Но особо изменений тогда никаких. Может я допускаю ошибку в html или в том же js?
Вот код html

<div id="container">
  <ul id="slides">
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Forest</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Mountain</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Ocean</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Canyon</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Lake</span></h1>
    </li>
  </ul>
  <ul id="slide-select">
    <li class="btn prev"><</li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="btn next">></li>
  </ul>
</div><a class="codepen-link" href="https://www.codepen.io/seanfree" target="_blank"></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script src="js/index.js"></script>

______________________________________________________________________
ну а комментарием выше соответственно js

[maxsnw]

heraldry, в индекс js пропишите документ онлоад и в нем вызовите слайдеры, а как они вызываются это в документации к конкретному слайдеру написано

[heraldry]

maxsnw, к этому слайдеру нет документации, он кастомный. В javascript особо не разбираюсь. Помогите переделать, пожалуйста...