Slick垂直轮播第14步内容被截断，求解决办法

问题解决方法 #

这个问题是因为垂直方向的Slick轮播在infinite: false的设置下，不会自动调整滚动位置以完整显示最后一张幻灯片。可以通过以下两种方式修复：

1. 添加滚动位置修正的回调函数

在导航轮播的初始化代码中加入afterChange回调，当切换到最后一步时手动调整滚动位置，确保第14步完整显示：

修改后的JavaScript代码：

$(function() {
  $('.slider-for-2').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      rows: 0,
      asNavFor: '.slider-nav-2',
  });
  $('.slider-nav-2').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      asNavFor: '.slider-for-2',
      dots: true,
      appendDots: $('.g--dots-2'),
      arrows: false,
      infinite: false,
      verticalSwiping: true,
      focusOnSelect: true,
      vertical: true,
      rows: 0,
      // 添加回调修正最后一步的滚动位置
      afterChange: function(slick, currentSlide) {
          if (currentSlide.currentSlide === slick.slideCount - 1) {
              const $slickList = $(this).find('.slick-list');
              const $slickTrack = $(this).find('.slick-track');
              const scrollTop = $slickTrack.height() - $slickList.height();
              $slickList.animate({ scrollTop: scrollTop }, 300);
          }
      },
      responsive: [{
                breakpoint: 1400,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    adaptiveHeight: true,
                    vertical: false,
                    fade: true,
                }
            }
        ]
  });
});

2. 额外添加底部内边距（可选）

如果上述方法仍有轻微截断，可以给轮播轨道添加底部内边距，避免最后一步被容器边缘裁切：

.slider-nav-2.slick-vertical .slick-track {
    padding-bottom: 1rem; /* 可根据你的幻灯片内边距调整数值 */
}

说明 #

• 回调函数会在切换到最后一步时，计算出需要滚动的距离，通过动画将轮播内容滚动到合适位置，确保第14步完整显示。
• 底部内边距则是给轮播轨道末尾增加额外空间，从样式层面防止内容被裁切。

你可以在全屏模式下运行代码片段，验证第14步是否能正常完整显示。

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