Slick slider проблемы с отображением в аккордионе

Сделал скрытый блок, который появляется после клика на его соседний элемент (аккордион), внутри скрытого блока содержится 2 слайдера Slick. Проблема в том, что слайдер появляется не сразу, но если я кликну мышкой по области где содержится слайдер, то он отобразится. Мне кажется, что это из-за того, что джаваскрипт файл подгружается сразу же после загрузки страницы, но на этот момент сладера на странице нет, потому как он находится в блоке со свойством display: none; Я пытался найти родительский блок для слайдеров, который есть на странице сразу после загрузки, но результат все тот же.

$("#content").ready(function() { /*родительский блок*/
            $(this).find('.category-accordion-content').each(function() {
                $(this).find('.category-accordion-content__slider_first').slick({ /*первый слайдер*/
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  arrows: false,
                  fade: true,
                  centerMode: true,
                  centerPadding: '0px',
                  asNavFor: $(this).find('.category-accordion-content__slider_second')
                });
                $(this).find('.category-accordion-content__slider_second').slick({ /*второй слайдер*/
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  arrows: false,
                  asNavFor: $(this).find('.category-accordion-content__slider_first'),
                  focusOnSelect: true
                });
            });
        });

Как сделать правильно, чтобы слайдеры отображались сразу и коректно? Надеюсь описал не совсем сумбурно