Slick Slider Syncing Multiple | How to display two slides at the same time?

Question

JavaScript

Greetings! Faced a problem. I need an implementation of a slick slider through its Slider Syncing feature, but displaying not one slide but two at the same time (slidesToShow: 2 - on .slider-for).

<div class="good__photo-showcase">
                                <div class="slider-for">
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image"  draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image" draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/1.jpg" alt="image" draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image" draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image" draggable="false"/>
                                    </div>
                                </div>
                                
                                <div class="slider-nav">
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image"  draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image" draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/1.jpg" alt="image" draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image" draggable="false"/>
                                    </div>
                                    <div class="item">
                                        <img src="img/img.jpg" alt="image" draggable="false"/>
                                    </div>
                                </div>

                            </div>

$('.slider-for').slick({
  slidesToShow: 1,  // здесь нужно отобразить два блока одновременно
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav',
   autoplay: true
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  arrows: false,
  dots: false,
  centerMode: true,
  focusOnSelect: true,
  vertical: true

});

I set the slidesToShow: 2 parameter, but nothing works, the slider breaks completely.

Thank you in advance for your help.