Кажется, вы слишком усложняете свой код. Вы пытаетесь установить стиль каждого отдельного слайда для каждого активного индекса. Выполнение этого вручную может быть сложной и подверженной ошибкам задачей. Я бы посоветовал вам разрешить CSS выполнять тяжелую работу за вас.
Я познакомлю вас с двумя селекторами, с которыми вы, возможно, еще не знакомы, если вы пропустите этот бит. + (соседний селектор брака) выберет прямой элемент, который идет после знака плюс. И ~ (общий селектор братьев и сестер) выберет всех братьев и сестер после волнистой линии. Так, например.
h1 + p{
...
}
Это выберет p, которое приходит напрямую после h1 на том же уровне.
h1 ~ p {
}
Это выберет все p, которые идут после h1 на том же уровне. С помощью этих селекторов вы можете условно стилизовать свои элементы.
Таким образом, в вашем слайдере вы хотите, чтобы все элементы, которые идут до активного слайда, были расположены слева. Таким образом, мы устанавливаем CSS, чтобы каждый слайд имел позицию по умолчанию слева.
.item {
left: -200px;
right: 0;
}
Теперь слайд .active должен быть центрирован. Так что этот слайд потеряет левую и правую позиции.
.item.active {
left: 0;
right: 0;
}
И отсюда мы будем использовать селекторы. Мы хотим, чтобы все слайды, появившиеся после .active, переместились вправо. И мы делаем это с помощью селектора ~.
.item.active ~ .item {
right: -200px;
left: 0;
}
Теперь все ваши слайды должны быть оформлены правильно и не требовать JS, чтобы переместить их в правильное положение. В качестве завершающего штриха вам нужно будет скрыть все элементы, которые идут после элемента, который идет после элемента .active. Глоток, но зацените.
.item.active + .item ~ .item {
opacity: 0;
visibility: hidden;
}
CSS сильнее, чем вы думаете. Я бы порекомендовал вам использовать JavaScript только для манипулирования CSS, когда вы выполняете вычисления, которые невозможно выполнить в CSS.
Проверьте приведенный ниже фрагмент кода, чтобы увидеть его в действии. Также рассмотрите возможность использования непрозрачного фона, поскольку ваши элементы будут перекрываться. Так что оттенок, который имитирует прозрачность, будет так же хорошо.
Надеюсь, это поможет вам. Если я не уверен или у вас есть дополнительные вопросы, пожалуйста, дайте мне знать.
Удачи!
$(document).ready(function() {
let $slider = $(".slider");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
let ind = 0;
$slider
.children(".item")
.each(function() {
$(this).attr("data-index", ind++);
});
i.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
$(".item").removeClass("active");
that.addClass("active");
});
});
body {
background: #c0b5f5;
}
.slider {
width: 75%;
height: 80%;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 50px;
}
.slider .item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
background: #ede9ff;
border-radius: 10px;
transition: all ease 0.7s;
z-index: 1;
left: 0;
transform: scale(0.8);
left: -200px;
right: 0;
margin: 0 auto;
}
.slider .item.active {
left: 0;
right: 0;
z-index: 2;
opacity: 1;
background: #fff;
transform: scale(1);
}
.slider .item.active ~ .item {
left: 0;
right: -200px;
}
.slider .item.active + .item ~ .item {
opacity: 0;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='slider'>
<div class='item'>
1
</div>
<div class='item active'>
2
</div>
<div class='item'>
3
</div>
<div class='item'>
4
</div>
<div class='item'>
5
</div>
<div class='item'>
6
</div>
</div>