Проблема с отображение 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


