Tabs not working?

P

pavel0101012021-03-21 14:43:04

css

pavel010101, 2021-03-21 14:43:04

Tabs not working?

Good afternoon everyone.
Sorry if that's the code, I'm new to this tricky business. I would be very grateful if you could help me with this question.
In a nutshell,
Connected slick slider Query
By default, the first tabs shows fine. When switching to the second tabs, it does not adapt to normal sizes. When I click slicknext/slickprev for the first time, the second tabs will adapt to the correct size.
I understand that you need to add this piece of code to js $('.slider-active').slick('setPosition');
but it still doesn’t work for me, I screwed up somewhere, not the fact that in js. I just can't figure out where. If it's not difficult, please tell me, thanks. Screenshots below and link to codepen
after first click on slickNext or prev works like the first one

<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>',
  });