Slick slider — как совместить asNavForи rows?

Question

[Il9mim]

Доброго дня.
Есть вопрос по slick slider-у.
Есть такой макет.


В общем-то, все просто - два связанных друг с другом слайдера, один при клике на его слайды синхронно переключает другой.
Проблема - в компоновке слайдов в две-три строки.
Если включить параметры rows: 3 и slidesPerRow: 3, получается следующее


В коде соответственно


Меняется на это


Ширина общего поля - еще ладно, но все фото теперь заключаются в совсем другие блоки и переключатель миниатюр не работает - слайды слайдера слева при клике на фото слайдера справа не переключаются.

Есть ли какое-то решение проблемы, чтобы переключение работало как при rows: 1 или полном отсутствии этого параметра?
Или, может, есть какое другое решение для подобной задачи помимо slick -а.
Спасибо.

Comments

[Froggyweb]

второй, который навигация - вообще не слайдер. Зачем?
есть картинки у картинки можно узнать индекс по которой кликнули, есть slideTo в API

[Il9mim]

Froggyweb, есть один нюанс - при смене основного изображения слева (например, перетаскивание мышью) должны переключаться и миниатюры справа.

[Froggyweb]

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

[Il9mim]

Если важно - версия слайдера 1.8.0

Код

<div class="product-photo">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="slider-for-wrapper">
                                        <div class="slider-for">
                                            <img src="./images/product-single.png" alt="">
                                            <img src="./images/product-single.png" alt="">
                                            <img src="./images/product-single.png" alt="">
                                            <img src="./images/product-single.png" alt="">
                                            <img src="./images/product-single.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="slider-nav-wrapper">
                                        <div class="slider-nav">
                                            <img src="./images/product-single-1.png" alt="">
                                            <img src="./images/product-single-2.png" alt="">
                                            <img src="./images/product-single-3.png" alt="">
                                            <img src="./images/product-single-4.png" alt="">
                                            <img src="./images/product-single-5.png" alt="">
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>

$('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        rows: 3,
        slidesPerRow: 3,
        asNavFor: '.slider-for',
        arrows: true,
        dots: false,
        focusOnSelect: true,
        centerMode: false
    });