如何在垂直滑動條中同步滑動條中的主滑動條和垂直滑動條的箭頭（上一個和下一個）保持相等的高度？

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
      });

如果您還有其他需要，可以查看官方文檔

這里

或寫信問我