如何保持主幻灯片和垂直幻灯片的高度相等，垂直滑块同步中的垂直滑块中的箭头（上一个和下一个）？

Question

我正在实现这样的垂直滑块

<div class="vertical-slider col-md-7 ga-vertical-gallery" id="slider">
<section class="services-slider">
   <div class="nav-container">
   <i class="fa fa-angle-up next">^</i>
    <div class="slider-nav">
      <div>
        <img src="https://via.placeholder.com/600x600">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/000080">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/fff">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/sss">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/FF33F0">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/F3FF33">
      </div>
    </div>
    <i class="fa fa-angle-down prev ">&#8964;</i>
  </div>
  <div class="main-container">
    <div class="slider slider-main">
      <div>
        <img src="https://via.placeholder.com/600x600">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/000080">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/fff">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/sss">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/FF33F0">
      </div>
      <div>
        <img src="https://via.placeholder.com/600x600/F3FF33">
      </div>
    </div>
  </div>

</section>
</div>

代码的关键部分在这里（没有很棒的字体链接=>所以没有图标）https://codepen.io/ydev/pen/KOVYrP

我总是希望导航滑块最多有 5 个图像，此外，我希望主图像滑块高度和箭头高度（上一个，下一个）和垂直缩略图看起来像这样（这里 6导航滑块上的图像，但我只想要 5 张图像。）

我还希望导航幻灯片和箭头之间的距离看起来相同。我对改变身高的想法持开放态度。关于如何解决这个问题的任何见解？

Answer 1

您可以像这样在光滑的设置中选择最大显示图像。

$('.slider-main').slick({
        slidesToShow: 1,
        arrows: false,
        asNavFor: '.slider-nav',
        vertical: true,
        autoplay: false,
        verticalSwiping: true,
        centerMode: false
      });

如果你还有什么需要可以查看官方文档

Here

或者写信问我