не работает часть:
var current = this.slider.parent().parent().parent().find('.active').eq(this.currentImg);
current.removeClass('active');
this.slider.parent().parent().parent().find('.set').eq(this.currentImg).addClass('active');
Идея такая, что при scrollImage у элемента .active убираем класс active и присваиваем .active элементу с индексом равном новому currentImg. Активный класс "переходит", но так же активным оказывается прошлый элемент.
Помогите, где ошибка?
<style>
body {
padding: 0;
margin: 0;
}
.slider-box, .slide {
width: 80vw;
height: 200px;
}
.slider-box {
position: relative;
margin: 0 auto;
overflow: hidden;
}
.slider-box, .slider, .slide, .slider-btn, .slider-pagination, .set {
display: flex;
}
.slide, .slider-btn {
align-items: center;
justify-content: center;
}
.slider-btn {
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background: #000;
color: #fff;
}
.slider-btn.previous {
left: 0;
}
.slider-btn.next {
right: 0;
}
.slider-pagination {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-40%);
}
.slider-point {
width: 5px;
height: 5px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #000;
}
.related-header {
text-align: center;
margin: 10px 0;
}
.set {
display: none;
justify-content: space-around;
padding: 10px;
}
.slider-box, .set, .block {
box-shadow: inset 0 0 1px 1px #000;
}
.block {
width: 100px;
height: 100px;
}
.set.active {
display: flex;
}
</style>
<div class="section">
<div class="cover">
<div class="slider-box">
<div class="slider">
<div class="slide"><span>1 / 3</span></div>
<div class="slide"><span>2 / 3</span></div>
<div class="slide"><span>3 / 3</span></div>
</div>
</div>
</div>
<div class="related">
<div class="related-header">
Заголовок
</div>
<div class="full-set">
<div class="set active">
<div class="block one">предмет 1 блока 1</div>
<div class="block two">предмет 2 блока 1</div>
<div class="block three">предмет 3 блока 1</div>
</div>
<div class="set">
<div class="block one">предмет 1 блока 2</div>
<div class="block two">предмет 2 блока 2</div>
<div class="block three">предмет 3 блока 2</div>
</div>
<div class="set">
<div class="block one">предмет 1 блока 3</div>
<div class="block two">предмет 2 блока 3</div>
<div class="block three">предмет 3 блока 3</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://profforma.store/assets/js/jquery.touchSwipe.min.js"></script>
Ссылка на Codepen
