时间戳

首页 > 解决方案 > 如何在垂直滑块同步光滑滑块中保持主幻灯片和垂直幻灯片的高度相同？

javascript - 如何在垂直滑块同步光滑滑块中保持主幻灯片和垂直幻灯片的高度相同？

问题描述

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

<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 张图片。） 在此处输入图像描述

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

标签： javascriptjqueryhtmlcssslick.js

解决方案

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

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

如果您需要其他任何内容，可以查看官方文档

这里

或者写信问我

推荐阅读