Разместить два слайдера на одной странице?

Question

[ivan7love]

Пытаюсь разместить 2 данных кастомных слайдера https://bootsnipp.com/snippets/K0QyW на одной странице
Прокручивает сначала один, потом второй
Подставлять разные id class под каждый слайдер пробовал, не получилось.

С JS не дружу от слова совсем. Могу только в вставить код, подключить библиотеку- будет работать.
Помогите, пожалуйста, разобраться с проблемой.

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

Comments

[Dima Polos]

Обязательно этот слайдер вставлять?
Slick slider
Видео по настройке раз
Видео два
Видео три
Настраивать его пара секунд, просто в видео все разжевано, и там практически все настройки, какие в нем есть, описаны.
Честно, в код выше не вникал.

[ivan7love]

Dima Polos, да, обязательно этот, на нем уже много построено
посмотрите, пожалуйста. я так понимаю, там дело буквально в 1-2 строчках

[Dima Polos]

ivan7love, ivan7love, обычно такие вещи делают с помощью классов, и потом вызывают слайдер как new Slider, а тут функция и переменные, которые она видит по замыканию. Так что для двух слайдеров надо либо переписать это дело на классы, либо вариант второй - скопировать код и вставить второй раз, поменять названия всем переменным и название функции на что-то другое, как вариант $slide1, и передать во второй слайдер другие селекторы.
Я пробовал только что создать два слайдера и хотел скинуть Вам результат, но откровенно говоря его надо переписать, в том числе и верстку, потому что когда создаешь второй слайдер у него не может быть id=container, потому что на странице только один элемент с таким id, а верстка завязана на id. Копировать код и вставлять тоже боль, короче, надо переписать. Дело не долгое, если уметь. Если просто копировать код, то сталкиваешься еще с одной проблемой - у всех слайдов одинаковый класс, но чтобы работали они не по очереди, а параллельно, надо указать вложенный селектор для слайдов. Если не переписывать сам слайдер, то выход такой - скопировать код дважды, во втором коде поменять названия переменных, и функции, поменять в css стили для контейнеров, и до самих слайдов дотягиваться через вложенный селектор.

Answer 1

[Dima Polos]

https://jsfiddle.net/9xfxv5qL/7/
Вот, там в css я закоментил строчку с #container{display: none}, раскоментируйте, и посмотрите, что два слайдера работают и параллельно, но теперь Вам надо поправить верстку, так как из-за привязки верстки к id и из-за позиционирования есть беда, что они накладываются один на другой. Вообще, этот слайдер не плохой, но надо переписать.

Comments

[ivan7love]

Спасибо огромнейшее, столько времени убил на это
Получилось, по примеру добавил дальше и позиционирование сделал, то уже дело простое ))

[Dima Polos]

ivan7love, пожалуйста! Советую слайдер переписать, но без знания, конечно, это сложно... Если есть друзья прогеры, мож кто по дружбе напишет. Я бы мог, но просто так лень, рад был помочь!=) Сам слайдер прикольный, но на данном этапе не расширяемый.