如何使用FlexSlider实现带上下箭头的垂直缩略图滑块？

当然可以实现！FlexSlider本身就支持垂直方向的滑块，结合箭头控件完全能满足你的需求。我帮你梳理下现有代码需要调整的地方，以及最终的实现方案：

首先，你的现有脚本里有个小拼写错误 #

你写的 directionlNav: true 多了一个字母l，正确的参数名是 directionNav: true，这个参数用来控制箭头控件的显示。

关键配置：开启垂直滚动模式 #

要让缩略图滑块变成垂直方向，只需要给你的gallery-details-carousel添加 vertical: true 参数即可，同时保持其他关联主滑块的配置不变。

修改后的完整脚本 #

$(window).load(function(){
  $('.gallery-details-carousel').flexslider({
    animation: "slide",
    controlNav: false,
    directionNav: true, // 修正拼写错误
    vertical: true, // 开启垂直滚动模式
    animationLoop: false,
    slideshow: false,
    itemWidth: 111,
    itemMargin: 5,
    maxItems: 5,
    asNavFor: '.gallery-details-slider',
  });

  $('.gallery-details-slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: ".gallery-details-carousel",
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
});

样式微调（可选） #

默认的箭头控件可能位置不太符合垂直滑块的视觉预期，你可以自定义CSS调整箭头的位置和样式：

/* 调整垂直滑块的箭头位置，让它垂直居中 */
.gallery-details-carousel .flex-direction-nav a {
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
}
/* 向上箭头 */
.gallery-details-carousel .flex-prev {
  left: -15px;
  /* 可以替换成向上箭头图标，比如用字体图标或者背景图 */
}
/* 向下箭头 */
.gallery-details-carousel .flex-next {
  right: -15px;
  /* 替换成向下箭头图标 */
}

这样调整后，你的缩略图滑块就会变成垂直方向，点击上下箭头就能实现滚动，同时保持和主滑块的同步关联啦！

内容的提问来源于stack exchange，提问作者Learner