如何在Slick轮播激活第一张幻灯片时将最后一张设为透明？

需求 #

当Slick轮播启用居中模式，且当前居中的是第一张幻灯片时，把最后一张幻灯片的透明度设为0；切换到其他幻灯片时，恢复透明度为1。

原代码的问题 #

你写的代码里有个明显的语法错误：jQuery的.css()方法不能用$('.last-slide').css('opacity') = '0';这种赋值方式，正确的写法是把属性值作为第二个参数传递给.css()方法。另外，还需要考虑Slick的克隆幻灯片特性，以及页面初始化时就应用状态，不然加载完页面默认显示第一张时，最后一张不会自动变透明。

修正后的完整实现 #

// 初始化轮播（替换成你的选择器和配置）
const slickCarousel = $('.carousel').slick({
  centerMode: true,
  infinite: true,
  slidesToShow: 3,
  // 你的其他轮播配置...
});

// 封装设置最后一张透明度的函数
function adjustLastSlideOpacity(currentSlide) {
  const slickInstance = slickCarousel.slick('getSlick');
  // 获取最后一张幻灯片（包含Slick克隆的元素）
  const lastSlide = slickCarousel.find('.slick-slide').last();
  
  if (currentSlide === 0) {
    lastSlide.css('opacity', '0');
  } else {
    lastSlide.css('opacity', '1');
  }
}

// 轮播切换完成后触发
slickCarousel.on('afterChange', function(event, slick, currentSlide) {
  const lastSlideIndex = slick.slideCount - 1;
  
  // 保留你原有的跳回逻辑
  if (currentSlide === lastSlideIndex) {
    jumpBack();
  }
  
  // 调整最后一张透明度
  adjustLastSlideOpacity(currentSlide);
});

// 页面初始化时立即执行，确保默认状态正确
adjustLastSlideOpacity(0);

补充说明 #

• 如果你的轮播开启了infinite: true，Slick会自动克隆首尾幻灯片，此时.slick-slide:last()刚好对应视觉上的最后一张，符合需求。
• 如果不需要无限滚动，可改用$('.slick-slide[data-slick-index="' + (slickInstance.slideCount - 1) + '"]')来定位原最后一张幻灯片。

内容的提问来源于stack exchange，提问作者Joel Guerreiro Borghi Filho