При переключении thumbnail класс active отрабатывается корректно. Но при переключении слайдов стрелками, на втором слайде фиксируется класс active. Идея в том, чтобы при переключении стрелками, класс active переключался с сохранением соответствия элементов друг другу. (Например: Желтый - Желтый, Красный - Красный и т.д.)
Помогите разобраться
var slideNow = 1;
var slideCount = $('#portfolio_slider .slider_wrap').children().length;
var navBtnId = 0;
var translateWidth = 0;
$(document).ready(function() {
$('#portfolio_slider .viewport').hover(
function () {
$('.slider_btns').css({'opacity' : '1', 'transition' : 'all ease 0.3s'});
},
function () {
$('.slider_btns').css('opacity','0');
});
$('.slider_arrow').click(function() {
$(".slider_wrap .slide,.slider_nav .slider_nav_btn").removeClass("active");
$(".slider_nav .slider_nav_btn:eq(" + $(this).addClass("active").index() + ")").addClass('active')
});
$(".slider_nav .slider_nav_btn:eq(" + $(".slider_wrap .slide").index() + ")").addClass('active')
$('.next_btn').click(function() {
nextSlide();
});
$('.prev_btn').click(function() {
prevSlide();
});
$('.slider_nav_btn').click(function() {
$('.slider_nav_btn').removeClass('active');
$(this).addClass('active');
navBtnId = $(this).index();
if (navBtnId + 1 != slideNow) {
translateWidth = -$('#portfolio_slider .viewport').width() * (navBtnId);
$('#portfolio_slider .slider_wrap').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow = navBtnId + 1;
}
});
});
function nextSlide() {
if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) {
$('#portfolio_slider .slider_wrap').css('transform', 'translate(0, 0)');
slideNow = 1;
} else {
translateWidth = -$('#portfolio_slider .viewport').width() * (slideNow);
$('#portfolio_slider .slider_wrap').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow++;
}
}
function prevSlide() {
if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) {
translateWidth = -$('#portfolio_slider .viewport').width() * (slideCount - 1);
$('#portfolio_slider .slider_wrap').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow = slideCount;
} else {
translateWidth = -$('#portfolio_slider .viewport').width() * (slideNow - 2);
$('#portfolio_slider .slider_wrap').css({
'transform': 'translate(' + translateWidth + 'px, 0)',
'-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
'-ms-transform': 'translate(' + translateWidth + 'px, 0)',
});
slideNow--;
}
}
#portfolio_slider {
width: 100%;
}
#portfolio_slider .viewport {
width: 100%;
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
text-align: center;
height: 200px;
}
#portfolio_slider .viewport .slider_wrap {
position: relative;
width: calc(100% * 5);
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
-webkit-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
-o-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
}
#portfolio_slider .viewport .slider_wrap .slide {
width: calc(100%/5);
list-style: none;
display: inline;
float: left;
}
#portfolio_slider .viewport .slider_wrap .slide .slide_img {
width: 100%;
height: auto;
}
#portfolio_slider .viewport .slider_wrap {
margin: 0;
padding: 0;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide {
width: 100%;
height: 200px;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.red {
background: red;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.blue {
background: blue;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.green {
background: green;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.purple {
background: purple;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.yellow {
background: yellow;
}
#portfolio_slider .viewport .slider_btns {
width: 100%;
padding: 0;
margin: 0;
text-align: center;
opacity: 0;
}
#portfolio_slider .viewport .slider_btns .prev_btn,
#portfolio_slider .viewport .slider_btns .next_btn {
position: absolute;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
top: calc(25% - 25px);
line-height: 50px;
font-size: 16px;
}
#portfolio_slider .viewport .slider_btns .prev_btn:hover,
#portfolio_slider .viewport .slider_btns .next_btn:hover {
cursor: pointer;
}
#portfolio_slider .viewport .slider_btns .prev_btn {
left: 20px;
}
#portfolio_slider .viewport .slider_btns .next_btn {
right: 20px;
}
#portfolio_slider .viewport .slider_btns:hover {
cursor: pointer;
}
.slider_nav {
display: table;
}
.slider_nav .slider_nav_btn {
display: table-cell;
padding: 5px;
}
.slider_nav .slider_nav_btn .thumbnail_slide {
width: 100px;
height: 100px;
}
.slider_nav .slider_nav_btn.active .thumbnail_slide {
border: 3px solid #333;
}
.slider_nav .slider_nav_btn .thumbnail_slide.red {
background: red;
}
.slider_nav .slider_nav_btn .thumbnail_slide.blue {
background: blue;
}
.slider_nav .slider_nav_btn .thumbnail_slide.green {
background: green;
}
.slider_nav .slider_nav_btn .thumbnail_slide.purple {
background: purple;
}
.slider_nav .slider_nav_btn .thumbnail_slide.yellow {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="portfolio_slider">
<div class="viewport">
<div class="slider_wrap">
<div class="slide active"><div class="main_slide red"></div></div>
<div class="slide"><div class="main_slide blue"></div></div>
<div class="slide"><div class="main_slide green"></div></div>
<div class="slide"><div class="main_slide purple"></div></div>
<div class="slide"><div class="main_slide yellow"></div></div>
</div>
<div class="slider_btns">
<div class="prev_btn slider_arrow"> PREV </div>
<div class="next_btn slider_arrow"> NEXT </div>
</div>
</div>
</div>
<div class="slider_nav">
<div class="slider_nav_btn active"><div class="thumbnail_slide red"></div></div>
<div class="slider_nav_btn"><div class="thumbnail_slide blue"></div></div>
<div class="slider_nav_btn"><div class="thumbnail_slide green"></div></div>
<div class="slider_nav_btn"><div class="thumbnail_slide purple"></div></div>
<div class="slider_nav_btn"><div class="thumbnail_slide yellow"></div></div>
</div>