Иницилазиация Slick slider динамически

Всем привет. Получилось так, что вывожу элементы слайдеров с помощью JS после нажатия кнопочки. Но проблема в том, что слайдер после этого не работает, там просто идут упорядоченно картинки. Вот код слайдера:

$(document).ready(function() {
$('.main_ps').slick({
    slidesToShow: 1,
    infinite: false,
    arrows:false,
    asNavFor:'.nav_ps'
});
$('.nav_ps').slick({
    slidesToShow: 6,
    infinite: false,
    arrows:true,
    asNavFor:'.main_ps'
});

});

Вот код JS вывода:

let name=document.querySelector('.port_title');
let text=document.querySelector('.port_text');
let zakaz=document.querySelector('.nbz');
let author=document.querySelector('.nba');
let slide_main=document.querySelector('.sip_ps');
let list='';
for(let i=0;i<port_arr.length;i++){
    let arr_elem=port_arr[i];
    if(+compid == +arr_elem['id']){
        name.innerText=arr_elem['name'];
        text.innerText=arr_elem['text'];
        zakaz.innerText=arr_elem['zakazchik'];
        author.innerText=arr_elem['author'];
        for(let j=0; j<arr_elem['imgs'].length;j++) {
            list += '<div class="slider_item_element"> <img src="' + arr_elem['imgs'][j] + '" alt="' + arr_elem['name'] + '"></div>';
        }
        break;
    }
}

Каким образом можно инициализировать слайдер после нажатия кнопки: Эти два JS кода находятся в разных файлах, если вдруг имеет значение.