How to set up slick slider in slider?

Question

css

It is necessary to make a slider in the slider. (I use slick) In the first slider, the background changes with slick, the content changes with

$('.section8_col_left').each(function () {
        i++;
        $(this).attr('data-slick-index', i);
    });

    $('.section8_img').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        var nextSlideNum = nextSlide + 1;
        $('.section8_col_left').removeClass('current');
        $('.section8_col_left[data-slick-index="' + nextSlideNum + '"]').addClass('current');
    });

class change and accordingly with dicplay: none/block.

Content is 2 blocks:
1) Text, it changes without question and everything is ok.
2) A complex-composite slider with a picture and a navigation carousel (previews). This is where all the problems are, namely:
1) Arrows do not work
2) When changing screens (the first slider), the slider starts to behave inappropriately, it propagates the navigation slider (the elements in it are assigned width: 0: )

Answer 1

Partially solved the problem, wrote a script that, on each slide of the main slider, removes the inner slider and creates it again for the next screen.
The issue with the arrows remained open, when the slider is recreated, the buttons do not want to be recreated ...