Всем добрый день.
Извините если что за код, я новичок в этом нелегком деле. Буду очень благодарен, если поможете с вопросом.
В двух словах,
Подключил slick slider Query
По умолчанию первый tabs показывает нормально. При переключении, на второй tabs он не адаптируется под нормальные размеры. Когда нажимаю первый раз slicknext/slickprev второй tabs адаптируется под нужные размеры.
Я понимаю, что надо в js добавить этот кусок кода $('.slider-active').slick('setPosition');
но у меня все равно не работает я где-то накосячил, не факт, что в js. Только не могу понять где именно. Если не сложно, подскажите пожалуйста, спасибо. Внизу скрины и ссылка на codepen
после первого клика на slickNext или prev работает как первый
<div class="tabs__inner">
<div class="tabs__title">
<a class="tabs__title-item" href="#tab-1">Основатели</a>
<a class="tabs__title-item" href="#tab-2">Консультанты</a>
<a class="tabs__title-item" href="#tab-3">Разработчики</a>
<a class="tabs__title-item" href="#tab-4">Дизайнеры</a>
<a class="tabs__title-item" href="#tab-5">И другие</a>
</div>
<div class="tabs__content">
<class class="tabs__content-items">
<div class="tabs__content-wrapper tabs__content-wrapper--active slider-active" id="tab-1">
<div class="tabs__content-item">
<h2 class="tabs__content-title">Основатели</h2>
<div class="tabs__top">
<img class="tabs__top-img" src="images/reviews/page-rew.png" alt="page rew">
<div class="tabs__top-box">
<p class="tabs__top-subtitle">Иван Иванов</p>
<p class="tabs__top-text">
Таким образом дальнейшее развитие играет важную роль в формировании направлений прогрессивного
развития. Не следует, однако забывать, что
реализация намеченных плановых заданий позволяет выполнять важные
задания по разработке форм развития. Задача организации, в особенности же укрепление и развитие
структуры влечет за собой процесс внедрения...
</p>
<a class="tabs__top-link" href="#">Подробнее</a>
</div>
</div>
<div class="tabs__bottom">
<div class="tabs__bottom-box">
<p class="tabs__bottom-subtitle">Иван Иванов</p>
<p class="tabs__bottom-text">
Таким образом дальнейшее развитие играет важную роль в формировании направлений прогрессивного
развития. Не следует, однако забывать, что
реализация намеченных плановых заданий позволяет выполнять важные
задания по разработке форм развития. Задача организации, в особенности же укрепление и развитие
структуры влечет за собой процесс внедрения...
</p>
<a class="tabs__bottom-link" href="#">Подробнее</a>
</div>
<img class="tabs__bottom-img" src="images/reviews/page-rew.png" alt="page rew">
</div>
</div>
<div class="tabs__content-item" id="tab-1">
<h2 class="tabs__content-title">Основатели2</h2>
<div class="tabs__top">
<img class="tabs__top-img" src="images/reviews/page-rew.png" alt="page rew">
<div class="tabs__top-box">
<p class="tabs__top-subtitle">Иван Иванов</p>
<p class="tabs__top-text">
Таким образом дальнейшее развитие играет важную роль в формировании направлений прогрессивного
развития. Не следует, однако забывать, что
реализация намеченных плановых заданий позволяет выполнять важные
задания по разработке форм развития. Задача организации, в особенности же укрепление и развитие
структуры влечет за собой процесс внедрения...
</p>
<a class="tabs__top-link" href="#">Подробнее</a>
</div>
</div>
<div class="tabs__bottom">
<div class="tabs__bottom-box">
<p class="tabs__bottom-subtitle">Иван Иванов</p>
<p class="tabs__bottom-text">
Таким образом дальнейшее развитие играет важную роль в формировании направлений прогрессивного
развития. Не следует, однако забывать, что
реализация намеченных плановых заданий позволяет выполнять важные
задания по разработке форм развития. Задача организации, в особенности же укрепление и развитие
структуры влечет за собой процесс внедрения...
</p>
<a class="tabs__bottom-link" href="#">Подробнее</a>
</div>
<img class="tabs__bottom-img" src="images/reviews/page-rew.png" alt="page rew">
</div>
</div>
</div>
</div>
.tabs {
padding: 50px 0 50px;
&__inner {
display: flex;
justify-content: space-between;
}
&__title {
display: flex;
flex-direction: column;
}
&__title-item {
max-width: 270px;
margin-bottom: 20px;
padding: 23px 79px 23px 43px;
@extend %exo2-400;
font-size: 22px;
color: #fff;
border: 2px solid #df8d23;
border-right: none;
border-radius: 30px 0px 0px 30px;
transition: color, background-color .3s;
&:first-child {
margin-top: 70px;
}
&:hover {
@extend %exo2-600;
color: #060207;
background-color: #df8d23;
}
}
&__content-wrapper {
display: none;
width: 900px;
overflow: hidden;
border: 2px solid #e39327;
border-radius: 9px;
&.tabs__content-wrapper--active {
display: block;
height: auto;
}
}
&__content-item {
position: relative;
width: 900px;
height: 570px;
border-radius: 9px;
}
.slick-prev,
.slick-next {
position: absolute;
content: '';
border: none;
background-color: transparent;
}
.slick-prev {
top: 24px;
right: 98px;
z-index: 999;
}
.slick-next {
top: 24px;
right: 46px;
}
&__content-title {
padding: 35px 0 25px;
padding-left: 35px;
@extend %exo2-600;
font-size: 22px;
color: #fab840;
text-transform: uppercase;
}
&__top,
&__bottom {
display: flex;
justify-content: space-between;
padding: 0 35px 25px 35px;
}
&__top {
position: relative;
&::after {
position: absolute;
content: '';
bottom: 0;
right: 32px;
width: 93%;
border-bottom: 2px solid #df8d23;
}
}
&__top-box,
&__bottom-box {
max-width: 610px;
}
&__bottom-box {
margin-top: 30px;
}
&__top-img,
&__bottom-img {
object-fit: contain;
}
&__top-subtitle,
&__bottom-subtitle {
@extend %exo2-600;
font-size: 18px;
color: #3c3c3c;
margin-bottom: 10px;
}
&__bottom-subtitle {
text-align: right;
}
&__top-text,
&__bottom-text {
@extend %exo2-400;
font-size: 18px;
color: #fff;
margin-bottom: 10px;
}
&__bottom-text {
text-align: right;
}
&__top-link,
&__bottom-link {
position: relative;
@extend %exo2-400;
font-size: 16px;
color: #df8d23;
padding-right: 16px;
&::after {
position: absolute;
content: '';
top: 6px;
right: 0;
width: 7px;
height: 13px;
background-image: url('../images/icons/arrow-rev.svg');
}
&:hover {
text-decoration: underline;
}
}
&__bottom-link {
display: flex;
justify-content: flex-end;
text-align: right;
}
}
$('.tabs__title-item').on('click', function (e) {
e.preventDefault();
$('.tabs__title-item').removeClass('tabs__title-item--active');
$(this).addClass('tabs__title-item--active');
$('.tabs__content-wrapper').removeClass('tabs__content-wrapper--active');
$($(this).attr('href')).addClass('tabs__content-wrapper--active');
});
$('.slider-active').slick({
slidesToShow: 1,
arrows: true,
dots: false,
prevArrow: '<button type="button" class="slick-prev"><img src="images/icons/slide-left.png" alt="slide left"></button>',
nextArrow: '<button type="button" class="slick-next"><img src="images/icons/slide-right.png" alt="slide right"></button>',
});
