Здравствуйте!
Расскажу немного подробнее, хотя и не знаю, как сформулировать. Верстаю тренировочный макет и столкнулся с такой проблемой: в одной из секций должны быть табы, внутри которых слайдер.
Сами табы активируются при добавлении модификатора _active, то же самое происходит и с контентом (слайдером) внутри табов. Они скрыты, но при добавлении модификатора _active становятся видимыми.
Проблема заключается в том, что при нажатии на один из табов тот элемент, назначенный изначально на _active – исчезает, экран растягивается, и ничего больше не появляется.
P.S. Как понял, проблема зарыта в слайдере, так как если, например, закомментировать, табы вроде как нормально работают, тем не менее вопрос это не убирает. Что делать, и как заставить их работать сообща?
Сам сайт:
https://deokti.github.io/ADVOGRAND/
HTML к этой секции: (P.S. Вставить до конца не смог из-за ограниченности символов, однако всё что дальше происходит - это копирование comment__inner).
spoiler
<!-- comment -->
<section class="comment">
<div class="container">
<h2 class="title title_comment">Отзывы</h2>
<div class="comment__block">
<ul class="comment__tabs">
<li class="comment__tab comment__tab_active">Здравоохранение</li>
<li class="comment__tab">Бизнес</li>
<li class="comment__tab">Семья</li>
<li class="comment__tab">ЖКХ</li>
<li class="comment__tab">Недвижимость</li>
<li class="comment__tab">Все</li>
</ul>
<!-- comment__inner -->
<div class="comment__inner comment__inner_active">
<!-- 1. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/1.png" alt="девушка берёт интервью у мужчины"></a>
<div class="comment__text">Длинное название видеоролика в две строки просто длинное</div>
</div>
<!-- /.comment__content -->
<!-- 2. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/2.png" alt="девушка разговаривает на камеру"></a>
<div class="comment__text">Название видеоролика</div>
</div>
<!-- /.comment__content -->
<!-- 3. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/3.png" alt="девушка берёт инвервью у другой девушки"></a>
<div class="comment__text">Длиннове название видеоролика в две строки очень длинное </div>
</div>
<!-- /.comment__content -->
<!-- 4. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/2.png" alt="девушка разговаривает на камеру"></a>
<div class="comment__text">Название видеоролика</div>
</div>
<!-- /.comment__content -->
<!-- 5. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/1.png" alt="девушка берёт интервью у мужчины"></a>
<div class="comment__text">Длинное название видеоролика в две строки просто длинное</div>
</div>
<!-- /.comment__content -->
<!-- 6. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/3.png" alt="девушка берёт инвервью у другой девушки"></a>
<div class="comment__text">Длиннове название видеоролика в две строки очень длинное </div>
</div>
<!-- /.comment__content -->
</div>
<!-- comment__inner -->
<!-- comment__inner -->
<div class="comment__inner">
<!-- 5. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/1.png" alt="девушка берёт интервью у мужчины"></a>
<div class="comment__text">Длинное название видеоролика в две строки просто длинное</div>
</div>
<!-- /.comment__content -->
<!-- 6. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/3.png" alt="девушка берёт инвервью у другой девушки"></a>
<div class="comment__text">Длиннове название видеоролика в две строки очень длинное </div>
</div>
<!-- /.comment__content -->
</div>
<!-- comment__inner -->
<!-- comment__inner -->
<div class="comment__inner">
<!-- 5. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/1.png" alt="девушка берёт интервью у мужчины"></a>
<div class="comment__text">Длинное название видеоролика в две строки просто длинное</div>
</div>
<!-- /.comment__content -->
<!-- 6. comment__content -->
<div class="comment__content">
<a href="" class="comment__img"><img src="img/comment/3.png" alt="девушка берёт инвервью у другой девушки"></a>
<div class="comment__text">Длиннове название видеоролика в две строки очень длинное </div>
</div>
<!-- /.comment__content -->
</div>
<!-- comment__inner -->
</div>
</div>
</section>
<!-- /.comment -->
SASS-код к этой секции +
ссылка на сам файл
.comment {
min-height: 660px;
background-color: #f5f5f5;
padding: 100px 0 110px 0;
&__block {
font-family: "Muller", sans-serif;
margin-top: 90px;
}
&__tabs {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
color: #313131;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
padding-left: 0; //отключает базовый отступ ul
}
&__tab {
cursor: pointer;
margin: 0 15px;
&:hover {
color: #e50000;
}
&_active {
color: #e50000;
font-weight: 700;
line-height: 34px; //выравнивает текст относительно овала
/* display: flex;
justify-content: center;
align-items: center; */
/* width: 89px; */
/* padding: 0 13px; */
padding: 0px 13px;
height: 35px;
border-radius: 5px;
border: 2px solid #e42626;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
&__inner {
flex-wrap: wrap;
margin-top: 70px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
&__content {
max-width: 300px;
margin: 0 auto;
margin-left: 10px;
margin-right: 10px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
&__img {
position: relative;
&::before {
position: absolute;
content: '';
background-image: url('../img/play-icon.svg');
width: 25px;
height: 25px;
top: 165px;
left: 20px;
z-index: 20;
}
}
&__text {
cursor: pointer;
margin-top: 20px;
color: #313131;
font-size: 13px;
font-weight: 400;
&:hover {
color: #e42626;;
text-decoration: underline;
}
}
}
.comment__inner {
display: none;
}
.comment__inner_active {
display: flex;
}
JQ:
$(window).load(function () {
//табы на секции comment
$('ul.comment__tabs').on('click', 'li:not(.comment__tab_active)', function () {
$(this)
.addClass('comment__tab_active').siblings().removeClass('comment__tab_active')
.closest('div.comment__block').find('div.comment__inner').removeClass('comment__inner_active').eq($(this).index()).addClass('comment__inner_active');
});
//слайдер на секции comment
$('.comment__inner').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
prevArrow: '<button type="button" class="arrow__left arrow__left_comment"><img src="img/left-arrow.svg" alt="стрелка влево" class="hover-arrow__left"></button>',
nextArrow: '<button type="button" class="arrow__right arrow__right_comment"><img src="img/right-arrow.svg" alt="стрелка вправо" class="hover-arrow__right"></button>',
});
});
