Implementing Slick js gallery to modal window bootstrap 4

I am using bootstrap 4 and Slick js gallery, trying to gallery in modal window with the arrows and thumbnails my code:

HTML:

<div class="container">
    <div class="row">
    <div class="col-md-6">
    <div class="slider-nav">
    <div data-toggle="modal" data-target="#myModal"><img src="path_to_image" alt=""></div>
    <div data-toggle="modal" data-target="#myModal"><img src="path_to_image" alt=""></div>
    </div>
   </div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
   </div>
   <div class="modal-body">
    <div class="slider-for">
    </div>
    </div>
  </div>
</div>
</div>

Javascript:

$('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    initialSlide: 2,
    arrows: true
});

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    arrows: true,
    asNavFor: '.slider-nav'
});

$(document).ready(function () {
    $('.slider-nav  img').on('click', function (e) {
        e.preventDefault();
        var src = $(this).attr('src');
        var slidesBig = '<div><img src="' + src + '" class=""/></div>';
        $('#myModal').on('shown.bs.modal', function () {
            $('#myModal .modal-body .slider-for').html(slidesBig);
        });
    });
})

Problem the image appends to modal, but.. it has no arrows and no other required slick tags

It appears like this: