вкладки и слайдер slicks

[ildar94]

Всем Драсте)) Есть задача сделать вкладки и при клике на разные вкладки чтобы менялись данные слайдера.
Нашёл скрипт в нете, все работает слайдеры меняются, но при нажатии на вкладку, слайдер отображается не корректно, видно на второй картинке. Если пролистать слайдер то получается фигня как на третей картинке. Если пролистать раза три то слайдер работает как нужно (первая картинка).
tabs_box имеет размер 1200 как и слайдер, есть медиа запросы на уменьшение размера в зависимости от размера окна

 <div class="tabs_box">
                    <ul class="tabs__menu">
                     <li class="tabs active"><a href="#" >диваны</a></li>
                     <li class="tabs"><a href="#">углы</a></li>
                     <li class="tabs"><a href="#">кровати</a></li>
                     <li class="tabs"><a href="#">шкафы</a></li>
                     <li class="tabs"><a href="#">стенки</a></li>
                     <li class="tabs"><a href="#">столы и стулья</a></li>
                    </ul>

            <div id="tab1" class="sl">
                <div class="sl__slide">
                    <img src="img/product/sl1.jpg" alt="Картинка слайдера 1" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl2.jpg" alt="Картинка слайдера 2" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl3.jpg" alt="Картинка слайдера 3" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl4.jpg" alt="Картинка слайдера 4" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl5.jpg" alt="Картинка слайдера 5" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl6.jpg" alt="Картинка слайдера 6" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl7.jpg" alt="Картинка слайдера 7" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl8.jpg" alt="Картинка слайдера 8" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl9.jpg" alt="Картинка слайдера 9" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl10.jpg" alt="Картинка слайдера 10" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
            </div>

  $(".sl").not(":first").hide();
    $(".tabs_box .tabs").click(function() {
        $(".tabs_box .tabs").removeClass("active").eq($(this).index()).addClass("active");
        $(".sl").hide().eq($(this).index()).fadeIn()
    }).eq(0).addClass("active");

@media (max-width: 1024px) {
      .sl {max-width: 900px;}
      .tabs_box {max-width: 901px;}

    }
    @media (max-width: 480px) {
      .sl {max-width: 300px;}
      .tabs_box {max-width: 301px;}

 $('.sl').slick({
        rows: 2,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        adaptiveHeight: true,
        responsive: [

            {
                breakpoint: 1024,
                settings: {
                    rows: 1,
                    arrows: false,
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    adaptiveHeight: true
                }
            },{
                breakpoint: 370,
                settings: {
                    rows: 1,
                    arrows: false,
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite: true,
                    adaptiveHeight: true
                }
            }]

    });

[рони]

$(".sl").not(":first").hide();

поставить после $('.sl').slick

[ildar94]

попробовал, поломался слайдер

[рони]

ildar94,
добавьте красное, вдруг поможет.
$(".tabs_box .tabs").click(function() {$(window).trigger("resize");

[ildar94]

ничего не изменилось, пробовал убрать правило для мобилки и медиа запросы, тоже не помогает

[рони]

ildar94,
нужен размер картинок, блоки скрыты размера нет , есть три способа решения
1.скрывать блоки после загрузки картинок и инициализации слайдеров.
2.включать подстроку размеров после клика по табу trigger("resize"); или встроенное api слайдера.
3. прописать размеры картинок в css.

[ildar94]

.sl {
        max-width: 1200px;
        height: auto;
        .sl__img {
          width: 300px;
          height: 300px;
        }
        .sl__title {
          color: #363636;
          font-family: "Open Sans", 'serif';
          font-size: 16px;
          font-weight: 400;
          line-height: 43px;
          text-align: center;
        }

        .sl__desc {
          color: #363636;
          font-family: "Open Sans", 'serif';
          font-size: 16px;
          font-weight: 400;
          line-height: 43px;
          text-align: center;
          display: none;
        }