@Dauletnbk
Верстальщик

Почему Slick slider сбрасывает стили блока?

у меня на сайте есть tabs вкладки, при загрузке сайта самая первая вкладка с слайдером открывается нормально, но при переключении на другой tab slick slider теряет свои стили?

мой сайт https://cindustries.eu/ слайдер стоит на главной

код слайдера

<div class="tabs" role="tablist">
    <!--новости компании-->
    <div class="tabs__content">
        <div class="tabs__pane tabs__pane_show" role="tabpanel">
            <div class="mainslider_container">
                <div class="mainslider slick-initialized slick-slider">
                    <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 3150px;"><div class="mainslider_item slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" style="width: 1050px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;">
    <div class="row">
        <div class="mainslider_title">
            Awards
        </div>
        <div class="col-md-6">
            <div class="mainslider_img" style="background: url(https://cindustries.eu/uploads/posts/2023-08/rectangle-33.jpg)"></div>
        </div>
        <div class="col-md-6">
            <div class="txt">
                On May 3, the following employees were awarded for excellent completion of the “Altyn Zhuldyz” program: Velesstroy ISP 3GI project Insulation and Painting Departments. Below is a list of people who have
                <a href="https://cindustries.eu/company-news/32-awards.html" class="mainslider_btn" tabindex="-1">
                    Read more
                </a>
            </div>
        </div>
    </div>
</div><div class="mainslider_item slick-slide" data-slick-index="1" aria-hidden="true" tabindex="0" style="width: 1050px; position: relative; left: -1050px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;">
    <div class="row">
        <div class="mainslider_title">
            Development Programs News
        </div>
        <div class="col-md-6">
            <div class="mainslider_img" style="background: url(https://cindustries.eu/uploads/posts/2023-07/diningroom-2048x1158_jpg.webp)"></div>
        </div>
        <div class="col-md-6">
            <div class="txt">
                Is a Program for the development of employees in reading books. By voting of all employees of the company, determines the book of the month. After appoints one day, where all employees will talk about the
                <a href="https://cindustries.eu/company-news/5-development-programs-news.html" class="mainslider_btn" tabindex="0">
                    Read more
                </a>
            </div>
        </div>
    </div>
</div><div class="mainslider_item slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false" tabindex="-1" style="width: 1050px; position: relative; left: -2100px; top: 0px; z-index: 1000; opacity: 1; transition: opacity 500ms ease 0s;">
    <div class="row">
        <div class="mainslider_title">
            Development Programs
        </div>
        <div class="col-md-6">
            <div class="mainslider_img" style="background: url(https://cindustries.eu/uploads/posts/2023-07/rectangle-33-1.jpg)"></div>
        </div>
        <div class="col-md-6">
            <div class="txt">
                Is a Program for the development of employees in reading books. By voting of all employees of the company, determines the book of the month. After appoints one day, where all employees will talk about the
                <a href="https://cindustries.eu/company-news/4-development-programs.html" class="mainslider_btn" tabindex="-1">
                    Read more
                </a>
            </div>
        </div>
    </div>
</div></div></div>



                </div>
                <div class="mainslider_prev slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
                <div class="mainslider_next slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
            </div>
        </div>
        <div class="tabs__pane" role="tabpanel">
            <div class="mainslider_container">
                <div class="mainslider slick-initialized slick-slider">
                    <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="mainslider_item slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;">
    <div class="row">
        <div class="mainslider_title">
            Проект 3GI-Velesstroy подходит к завершению.
        </div>
        <div class="col-md-6">
            <div class="mainslider_img" style="background: url(https://cindustries.eu/uploads/posts/2023-08/1691488111_snimok-jekrana-2023-08-08-v-14_47_39.png)"></div>
        </div>
        <div class="col-md-6">
            <div class="txt">
                Половину отведенной жизни мы проводим в рабочем коллективе, вот и проект 3GI-Velesstroy подходит к завершению. Мы вместе прошли определенный отрезок 2019 – 2023 и все это время были отличной командой. От лица
                <a href="https://cindustries.eu/industry-news/35-проект-3gi-velesstroy-подходит-к-завершению.html" class="mainslider_btn" tabindex="0">
                    Read more
                </a>
            </div>
        </div>
    </div>
</div></div></div>

                </div>
                <div class="mainslider_prev slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
                <div class="mainslider_next slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
            </div>
        </div>
        <div class="tabs__pane" id="content-3" role="tabpanel">
            <div class="mainslider_container">
                <div class="mainslider slick-initialized slick-slider">
                    <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 0px;"><div class="mainslider_item slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;">
    <div class="row">
        <div class="mainslider_title">
            Asia Pacific Masters Games 2023 아시아 태평양 마스터즈 게임
        </div>
        <div class="col-md-6">
            <div class="mainslider_img" style="background: url(https://cindustries.eu/uploads/posts/2023-08/snimok-jekrana-2023-08-08-v-13_53_05.png)"></div>
        </div>
        <div class="col-md-6">
            <div class="txt">
                The second edition of the Asia Pacific Masters Games, also known as Jeonbuk, in 26 sports will be held in May 2023 in Jeolla-Pukto, Republic of Korea. More than 10,000 people from 70 countries of the world
                <a href="https://cindustries.eu/hse/33-asia-pacific-masters-games-2023-아시아-태평양-마스터즈-게임.html" class="mainslider_btn" tabindex="0">
                    Read more
                </a>
            </div>
        </div>
    </div>
</div></div></div>

                </div>
                <div class="mainslider_prev slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
                <div class="mainslider_next slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
            </div>
        </div>
        <div class="tabs__pane" id="content-4" role="tabpanel">
            <div class="mainslider_container">
                <div class="mainslider slick-initialized slick-slider">
                    
                <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 0px;"></div></div></div>
                <div class="mainslider_prev slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
                <div class="mainslider_next slick-arrow slick-hidden" aria-disabled="true" tabindex="-1" style=""></div>
            </div>
        </div>
    </div>
    <div class="tabs__nav">
        <button class="tabs__btn tabs__btn_active" data-index="0" role="tab">
            Company News
        </button>
        <button class="tabs__btn" data-index="1" role="tab">Industry News</button>
        <button class="tabs__btn" data-index="2" role="tab">HSE</button>
        <button class="tabs__btn" data-index="3" role="tab">Career</button>
    </div>
</div>


скрипт слайдера

<script>
            $(document).ready(function() {
                $('.mainslider').slick({
                    infinite: true,
                    slidesToShow: 1,
                    autoplay: true,
                    speed: 500,
                    fade: true,
                    prevArrow: $('.mainslider_prev'),
                    nextArrow: $('.mainslider_next'),
                    slidesToScroll: 1
                });
            });

        </script>
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы