如何使用Slick Slider实现点击固定幻灯片位置功能

核心改造逻辑如下：

• 取消原有的文本交换逻辑，改为监听Slick Slider的beforeChange事件，存在锁定幻灯片时拦截默认滚动行为
• 点击幻灯片时记录其当前在可视区域的固定位置，后续滚动时仅调整其余幻灯片的排序，保证锁定项始终停在目标位置
• 解除锁定后恢复Slick原生的滚动逻辑

完整代码 #

HTML #

<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
  <div class="slide">6</div>
  <div class="slide">7</div>
  <div class="slide">8</div>
  <div class="slide">9</div>
</div>

CSS #

body {
  background: #FFF;
  padding: 20px;
  font-family: Helvetica;
}

.slider {
  color: #333;
  padding: 0 0 30px;
}

.slide {
  font-size: 90px;
  width: 150px;
  padding: 10px 0;
  margin: 0;
  text-align: center;
  border: 1px solid #999;
}
.slide.locked { 
  background: rgba(255,255,0,0.5); 
}

.slick-prev, .slick-next {
  position: absolute;
  bottom:0;
}
.slick-next { left:80px; }

JavaScript #

let lockedSlide = null;
let lockedPosition = -1; // 记录锁定的幻灯片在可视区域的位置序号，从0开始

$(document).ready(function(){
  const $slider = $('.slider');
  $slider.slick({
    dots: false,
    infinite: false,
    speed: 0, // 关闭动画避免DOM调整时的闪烁，需要动画可后续自定义
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });

  // 点击幻灯片切换锁定状态
  $('.slide').on('click', function() {
    const $this = $(this);
    // 已锁定则解锁
    if ($this.hasClass('locked')) {
      $this.removeClass('locked');
      lockedSlide = null;
      lockedPosition = -1;
      return;
    }
    // 先清除其他锁定项
    $('.slide.locked').removeClass('locked');
    $this.addClass('locked');
    lockedSlide = $this;
    // 记录当前在可视区的位置
    const currentSlides = $slider.slick('getSlick').$slides;
    lockedPosition = currentSlides.index($this) - $slider.slick('slickCurrentSlide');
  });

  // 监听滚动前事件，处理锁定逻辑
  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    if (!lockedSlide || lockedPosition < 0) return;
    // 存在锁定项时阻止默认滚动
    event.preventDefault();
    const direction = nextSlide > currentSlide ? 'next' : 'prev';

    if (direction === 'next') {
      // 下滚：找到锁定项后面的第一个元素，移到锁定项前面
      const $next = lockedSlide.next();
      if ($next.length) {
        $next.insertBefore(lockedSlide);
      }
    } else {
      // 上滚：找到锁定项前面的第一个元素，移到锁定项后面
      const $prev = lockedSlide.prev();
      if ($prev.length) {
        $prev.insertAfter(lockedSlide);
      }
    }
    // 刷新slick
    $slider.slick('refresh');
    // 保持当前滚动位置不变
    $slider.slick('slickGoTo', currentSlide, false);
  });
});

效果说明 #

点击任意幻灯片即可锁定在当前可视位置，点击前后翻页按钮时其余幻灯片正常滚动，锁定项位置不变，再次点击锁定的幻灯片即可解除锁定，恢复正常滚动逻辑。

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