实现垂直图片滑块自由拖拽：Slick Slider适配问题求助

我需要实现图片容器从上到下自由滑动浏览所有图片的效果，类似Swiper的freemode垂直版本。测试过swiper、owl、slick等滑块组件后，仅Slick Slider的效果接近预期，但当前配置还未达成目标。

原实现代码 #

HTML #

<div class="images">
   <div class="slider">
        <img src="https://via.placeholder.com/640x320/124477/" />
        <img src="https://via.placeholder.com/640x220/2288AA/" />
        <img src="https://via.placeholder.com/640x220/AABB44/" />
        <img src="https://via.placeholder.com/640x320/124477/" />
        <img src="https://via.placeholder.com/640x420/994477/" />
        <img src="https://via.placeholder.com/640x520/AABB44/" />
    </div>
</div>

CSS #

* {
margin:0px;
padding:0px;
border:none;
outline:none;
}

img {
max-width: 100% !important;
height: auto !important;
vertical-align: bottom;
width: 100%
}

.images {
height: 100vh;
width:500px;
margin:0 auto;
overflow:hidden;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}

.slick-list {
height: 100vh !important
}

JS #

$('.slider').slick({
vertical: true,
swipeToSlide: true,
verticalSwiping: true,
infinite: false,
arrows: false
});

调整后的实现方案 #

Slick本身无原生freemode，但可通过修改配置+自定义逻辑实现类自由滑动效果，让滑块能停在任意位置，无需强制对齐单张图片：

修改后的CSS #

* {
margin:0px;
padding:0px;
border:none;
outline:none;
}

img {
max-width: 100% !important;
height: auto !important;
vertical-align: bottom;
width: 100%
}

.images {
height: 100vh;
width:500px;
margin:0 auto;
overflow:hidden;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}

.slick-list {
height: 100vh !important;
/* 禁用Slick默认弹性效果，提升滑动流畅度 */
overflow: visible !important;
}

.slick-track {
/* 取消强制对齐，让轨道自由滚动 */
transform: none !important;
position: absolute;
top: 0;
}

.images:active {
cursor: grabbing;
}

修改后的JS #

$(document).ready(function() {
  const $slider = $('.slider');
  let isDragging = false;
  let startY = 0;
  let trackTop = 0;

  // 初始化Slick，保留基础垂直滑动配置
  $slider.slick({
    vertical: true,
    verticalSwiping: true,
    infinite: false,
    arrows: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    // 禁用自动对齐和过渡动画
    adaptiveHeight: false,
    speed: 0
  });

  const $track = $slider.find('.slick-track');

  // 监听鼠标/触摸开始事件
  $slider.on('mousedown touchstart', function(e) {
    isDragging = true;
    startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
    trackTop = parseInt($track.css('top')) || 0;
    e.stopPropagation();
  });

  // 监听鼠标/触摸移动事件
  $(document).on('mousemove touchmove', function(e) {
    if (!isDragging) return;
    const currentY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
    const deltaY = currentY - startY;
    let newTop = trackTop + deltaY;
    
    // 限制滑动边界，避免内容超出容器
    const trackHeight = $track.height();
    const containerHeight = $('.images').height();
    const maxTop = 0;
    const minTop = containerHeight - trackHeight;
    
    newTop = Math.max(minTop, Math.min(maxTop, newTop));
    $track.css('top', newTop + 'px');
    
    e.preventDefault();
  });

  // 监听鼠标/触摸结束事件
  $(document).on('mouseup touchend', function() {
    isDragging = false;
  });
});

核心说明 #

• 禁用Slick默认的过渡动画与对齐逻辑，手动控制.slick-track的top值实现自由滑动
• 添加边界限制，确保滑动时内容不会超出可视容器范围
• 保留原生鼠标/触摸拖拽体验，优化拖拽时的光标样式

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