像亚马逊产品页面一样将滑块图像垂直放置在左侧

Question

使用 slick.js 来创建滑块功能，它看起来像这样

我想要左边的滑块部分。像下面

<`     <div class="hero-section">
                <div class="hero-left">
             
                    <div class="main">
                        <div class="slider slider-for">
                          <div class="slide"><img src="./assets/imgA.jpeg"/></div>
                          <div class="slide"><img src="./assets/imgB.jpeg"/></div>
                          <div class="slide"><img src="./assets/imgC.jpeg"/></div>
                        </div>
                        <div class="slider slider-nav">
                          <div class="slide"><img src="./assets/imgA.jpeg"/></div>
                          <div class="slide"><img src="./assets/imgB.jpeg"/></div>
                          <div class="slide"><img src="./assets/imgC.jpeg"/></div>
                        </div>
                      </div>
                </div>
</div>`

<script>
      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        dots: true,
        asNavFor: '.slider-nav'
      });
      $('.slider-nav').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        // dots: true,
        infinite: true,
        arrows: true,
        centerMode: true,
        focusOnSelect: true
      });
    </script>