0

Всем привет, есть такой слайдер, который меняет изображения, но проблема в том, что меняет он их некорректно. То есть он добавляет еще 1 изображения,а уже потом убирает второе.

http://prntscr.com/mmke1u

Можете ли вы подсказать, как правильно организовать плавную смену?

$('.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 как сделать автоподгон изображений в слйдере?

1 ответ 1

0

Вам надо в атрибутах tabs > item добавлять ссылку на фото, после чего нажимаете на Элемент, изменялся src= tab-content (а не класс уже существующих элементов)

$('.tab-block .tabs .item').on('click', function() {
  var img_src = $(this).attr('img_src');
  $('.tab-content .item').attr('src', img_src);
});
.tab-content .item {
  transition: 0.2s;
}
<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" 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">Индексы благонадёжности</div>
    <div class="item" img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg">Арбитражная практика</div>
    <div class="item" img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg">Аффилированность котрагентов</div>
    <div class="item" img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg">Реестр жалоб в ФАС</div>
    <div class="item" img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg">Реестр недобросовестных поставщиков</div>
    <div class="item" img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg">Банковские гарантии</div>
  </div>
  <div class="tab-content">
    <div class="item"><img src="http://www.visitgreece.gr/deployedFiles/StaticFiles/Photos/Generic%20Contents/Forests/mountains_2_560.jpg" alt=""></div>
  </div>
</div>

2
  • то есть вместо этой части написать ваш блок? let i = $(this).index(), parent = $(this).closest('.tab-block'); parent.find('.tabs .item.active').removeClass('active'); $(this).addClass('active'); просто я хочу ,чтобы элемент некоторый был еще и активен 18 фев 2019 в 10:04
  • вы можете им присваивать любые классы которые хотите, главное чтобы классы не имели свойств по "display", то есть чтобы не скрывали или наоборот показывали данный блок где должно быть главная фотография. 18 фев 2019 в 10:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.