Пытаюсь разместить 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);
}
