使用Slick.Js点击缩略图切换div背景图及多尺寸图片适配问题

一、修复不同尺寸图片适配不稳定问题 #

你当前适配不稳定的核心原因有两个：

1. 给img标签设置了无效的background-size: fill属性，该属性仅对背景图生效，对img标签无效
2. 没有给图片设置统一的裁剪规则，不同宽高比的图片会撑开容器导致布局错乱

修改对应CSS代码即可：

/* 替换原有.banner-img样式 */
.banner-img {
  width: 100%;
  height: 1020px; /* 和你.header的高度保持一致即可 */
  object-fit: cover; /* 等比缩放填满容器，超出部分自动裁剪，不会出现拉伸变形 */
  object-position: center;
  display: block;
}
/* 修复重复定义的slider-for定位，替换原有样式 */
.slider-for {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
/* 优化container适配小屏幕，替换原有样式 */
.container {
  max-width: 1440px;
  width: 100%;
}
/* 调整缩略图位置，避免和上方内容重叠，可根据实际需求调整数值 */
.thumbnails {
  margin-top: 750px;
}

二、实现点击缩略图/轮播切换时修改指定div背景 #

推荐监听Slick官方提供的afterChange事件，无论是点击缩略图切换、自动轮播还是手动滑动都会触发，比单独绑定点击事件兼容性更好，修改JS代码如下：

$(document).ready(function() {
  $('.slider-for').slick({
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    fade: true,
    asNavFor: '.thumbnails'
  });
  $('.thumbnails').slick({
    slidesToShow: 9,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    arrows: false,
    centerMode: true,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 2000
  });

  // 页面加载完成先设置初始背景图，这里以你代码中的.header为目标div，可替换为你需要的选择器
  const initImgSrc = $('.slider-for .slick-current .banner-img').attr('src');
  $('.header').css({
    'background-image': `url(${initImgSrc})`,
    'background-size': 'cover',
    'background-position': 'center',
    'background-repeat': 'no-repeat'
  });

  // 监听轮播切换事件，动态修改背景图
  $('.slider-for').on('afterChange', function(event, slick, currentIndex) {
    const currentImgSrc = $(slick.$slides[currentIndex]).find('.banner-img').attr('src');
    $('.header').css('background-image', `url(${currentImgSrc})`);
  });

  // 如果你不需要显示slider-for的原图，可以直接隐藏该轮播，不影响功能
  // $('.slider-for').hide();
});

如果你的需求仅需要点击缩略图才触发背景切换，不需要同步自动轮播的背景，也可以单独绑定缩略图的点击事件，代码如下：

$('.thumbnail-img').on('click', function() {
  const targetSrc = $(this).attr('src');
  $('.header').css({
    'background-image': `url(${targetSrc})`,
    'background-size': 'cover',
    'background-position': 'center',
    'background-repeat': 'no-repeat'
  });
});

三、可选优化 #

如果不需要保留slider-for的图片展示，仅作为背景图源使用，直接添加.slider-for {display: none;}的CSS即可，所有功能依然正常生效。

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