Всем привет, есть такой слайдер, который меняет изображения, но проблема в том, что меняет он их некорректно. То есть он добавляет еще 1 изображения,а уже потом убирает второе.
Можете ли вы подсказать, как правильно организовать плавную смену?
$('.tab-block .tabs .item').eq(0).addClass('active');
$('.tab-block .tab-content .item').eq(0).show();
let tabsH = $('.tab-block .tabs').height();
$('.tab-block .tab-content').css('min-height', tabsH);
$('.tab-block .tabs .item').on('click', function() {
let i = $(this).index(),
parent = $(this).closest('.tab-block');
parent.find('.tabs .item.active').removeClass('active');
$(this).addClass('active');
parent.find('.tab-content .item').fadeOut(700).eq(i).fadeIn(700);
});
.tab-block {
width: 100%;
margin: 80px auto 0;
padding: 10px;
box-sizing: border-box;
font: 20px/26px HelveticaNeueCyr;
letter-spacing: 0.4px;
color: #333
}
.tab-block::after {
content: '';
display: block;
clear: both
}
.tab-block .tabs,
.tab-block .tab-content {
display: inline-block;
float: left;
box-sizing: border-box
}
.tab-block .tabs {
border-left: 2px solid #fff
}
.tab-block .tabs .item:first-child {
margin-top: 0;
}
.tab-block .tabs .item {
padding: 5px 10px;
width: 100%;
color: #333;
box-sizing: border-box;
cursor: pointer;
margin-top: 30px;
}
.tab-block .tabs .item.active {
border-left: 2px solid #0c569b;
color: #0c569b;
margin-left: -2px
}
.tab-block .tab-content {
padding: 10px;
float: right
}
.tab-block .tab-content .item:not(.active) {
display: none
}
.tab-content .item img {
max-width: 600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-block">
<div class="tabs">
<div class="item">Регистрационные данные</div>
<div class="item">Индексы благонадёжности</div>
<div class="item">Арбитражная практика</div>
<div class="item">Аффилированность котрагентов</div>
<div class="item">Реестр жалоб в ФАС</div>
<div class="item">Реестр недобросовестных поставщиков</div>
<div class="item">Банковские гарантии</div>
</div>
<div class="tab-content">
<div class="item"><img src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3" alt=""></div>
<div class="item"><img src="https://clck.ru/ETfTF" alt=""></div>
<div class="item"><img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg" alt=""></div>
<div class="item"><img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg" alt=""></div>
<div class="item"><img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg" alt=""></div>
</div>
</div>
P.S как сделать автоподгон изображений в слйдере?