Place two sliders on one page?

Question

JavaScript

I'm trying to place 2 custom sliders https://bootsnipp.com/snippets/K0QyW on one page
Scrolls first one, then the second I
tried to substitute different id classes for each slider, it didn't work.
With JS I'm not on friendly terms at all. I can only insert the code into it, connect the library, it will work.
Help, please, deal with the problem.

<script >"use strict";

var $slides = undefined,
    interval = undefined,
    $selectors = undefined,
    $btns = undefined,
    currentIndex = undefined,
    nextIndex = undefined;

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

  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);

});
</script>

<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>
  </ul>

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slides {
  position: relative;
  width: 100%;
  height: 100%;
}
#slides .slide {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
#slides .slide .title {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 20px;
  z-index: 2;
  padding-top: 5px;
  font-family: "Reem Kufi", sans-serif;
  font-size: 5em;
  color: white;
  overflow: hidden;
}
#slides .slide .title .title-text {
  display: block;
  -webkit-transform: translateY(1.2em);
          transform: translateY(1.2em);
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-partial {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-partial img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-left {
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
#slides .slide .slide-left img {
  top: 0;
  right: 0;
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
#slides .slide .slide-right {
  top: 0;
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
#slides .slide .slide-right img {
  top: 0;
  left: 0;
  -o-object-position: 0% 50%;
     object-position: 0% 50%;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#slides .slide.active .title .title-text {
  -webkit-transform: translate(0);
          transform: translate(0);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
#slides .slide.active .slide-partial, #slides .slide.active .slide-partial img {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

Answer 1

https://jsfiddle.net/9xfxv5qL/7/
Here, in css, I commented out the line with #container{display: none}, uncomment it, and see that the two sliders work in parallel, but now you need to fix the layout, since because of binding layout to id and because of positioning, there is a problem that they overlap one another. In general, this slider is not bad, but it needs to be rewritten.