Проблема с отображение slick slider в аккордеоне

При открытие аккордеона, слайдер погружается совершенно не правильно, но если его сдвинуть курсором на 1 px, то она начинает работать правильно

До открытия После открытия После сдвига

<div class="menu__block _container">
    <div class="menu__block_title">
        <h1>Меню</h1>

        <p>От нас невозможно уйти голодным. К вашим услугам лучший шеф-повар Москвы</p>
    </div>
    <div class="menu__line one section_2">
        <div class="menu__section">
            <div class="menu__section_header">
                <h3><img src="hot.png" alt=""> Горячие закуски</h3>
            </div>
            <div class="menu__section_body">
                    <div class="slider">
                        <div class="block__content">
                            <div class="qwe">
                                <img src="bl1.png" alt="">
                            <div class="block__title">
                                <h5>Тарелка свежих овощей с чесночно-творожным соусом</h5>
                            </div>
            
                            <div class="block__product">
                                <p>Сладкий перец,томаты, огурцы, зеленые перья лука, зелень, стебли сельдерея</p>
            
                                <p>220 г / 150 ккал.</p>
                            </div>
            
                            <div class="block__price">
                                <h3>210, — ₽</h3>
                            </div>
                            </div>
                        </div>

                        <div class="block__content">
                            <img src="bl1.png" alt="">
                            <div class="block__title">
                                <h5>Тарелка свежих овощей с чесночно-творожным соусом</h5>
                            </div>
            
                            <div class="block__product">
                                <p>Сладкий перец,томаты, огурцы, зеленые перья лука, зелень, стебли сельдерея</p>
            
                                <p>220 г / 150 ккал.</p>
                            </div>
            
                            <div class="block__price">
                                <h3>210, — ₽</h3>
                            </div>
                        </div>
            
                        <div class="block__content">
                            <img src="bl2.png" alt="">
                            <div class="block__title">
                                <h5>Тарелка свежих овощей с чесночно-творожным соусом</h5>
                            </div>
            
                            <div class="block__product">
                                <p>Сладкий перец,томаты, огурцы, зеленые перья лука, зелень, стебли сельдерея</p>
            
                                <p>220 г / 150 ккал.</p>
                            </div>
            
                            <div class="block__price">
                                <h3>210, — ₽</h3>
                            </div>
                        </div>
            
                        <div class="block__content">
                            <img src="bl3.png" alt="">
                            <div class="block__title">
                                <h5>Тарелка свежих овощей с чесночно-творожным соусом</h5>
                            </div>
            
                            <div class="block__product">
                                <p>Сладкий перец,томаты, огурцы, зеленые перья лука, зелень, стебли сельдерея</p>
            
                                <p>220 г / 150 ккал.</p>
                            </div>
            
                            <div class="block__price">
                                <h3>210, — ₽</h3>
                            </div>
                        </div>
                    </div>
            </div>
        </div>

'''***

._container {
    max-width: 1100px;

    margin: 0 auto;
}

.menu__block {
    padding: 50px 0;
}

.menu__section {
    border-bottom: 1px solid;
}

.menu__section_header {
    position: relative;

    cursor: pointer;

    padding: 30px 15px;
}

.menu__section_header h3 {
    display: flex;
    align-items: center;
}

.menu__section_header img {
    margin-right: 20px;
}

.menu__section_header::before,
.menu__section_header::after {
    content: '';

    width: 10px;
    height: 1px;

    background: #000;

    position: absolute;

    transition: all .3s linear;
}

.menu__section_header::before {
    transform: rotate(-40deg) translatey(-50%);
    right: 0;top: 50%;
}

.menu__section_header::after {
    transform: rotate(40deg) translatey(-50%);
    right: 7px;top: 50%;
}

.menu__section_header._show::before {
    transform: rotate(40deg);
}

.menu__section_header._show::after {
    transform: rotate(-40deg);
}

.menu__section_body {
    display: none;
    width: 100%;

    padding-bottom: 50px;
}

.menu__section_body._active {
    display: flex;
}

.slider {
    display: flex;
}

.block__content {
    flex: 1 1 100%;

    margin-right: 15px;
}***'''

'''***

     $(document).ready(function(){
    $('.slider').slick({
        arrows: false,
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false
    });
});

$(document).ready(function () {
    $('.menu__section_header').click(function (e) {
        if ($('.menu__line').hasClass('one')) {
            $('.menu__section_header').not($(this)).removeClass('_show');
            $('.menu__section_body').not($(this).next()).slideUp(600);
        }
        $(this).toggleClass('_show').next().slideToggle(600);
    });
});

***'''> js


Ответы (0 шт):