Swiper JS滑块问题：固定高度下滑层图片重叠

要实现固定高度（如800px）且图片保持原始比例、宽度自适应的滑块，需要从CSS样式调整和Swiper配置优化两方面入手：

一、核心CSS样式设置 #

给滑块容器和图片添加以下样式，确保图片按比例适配固定高度：

/* 固定滑块容器高度 */
.swiper {
  height: 800px;
  overflow: hidden;
}

/* 确保每个slide高度继承容器高度 */
.swiper-slide {
  height: 100%;
  display: flex;
  align-items: center; /* 可选：垂直居中图片 */
  justify-content: center; /* 可选：水平居中图片 */
}

/* 图片保持原始比例，高度填满slide */
.swiper-slide img {
  height: 100%;
  width: auto;
  object-fit: contain; /* 若需避免图片裁切用contain；需填满容器允许裁切则用cover */
}

二、调整Swiper配置 #

你当前配置中，断点设置的slidesPerView会强制固定数量的幻灯片显示，和宽度自适应需求冲突。修改后的配置如下：

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> 
<script>
$(".swiper").append(`<div class="swiper-scrollbar"></div>`);
$(".swiper").append(`<div class="swiper-pagination"></div>`);
$(".swiper").append(`<div class="swiper-arrow button-prev"></div>`);
$(".swiper").append(`<div class="swiper-arrow button-next"></div>`);

const swiper1 = new Swiper(".swiper", {
  // 关键：设置为auto让slide宽度自适应内容
  slidesPerView: 'auto',
  centeredSlides: false,
  speed: 1500,
  loop: false,
  simulateTouch : true,
  loopFillGroupWithBlank: false,
  grabCursor: true,
  direction: "horizontal",
  // 移除断点中固定slidesPerView的设置，按需保留其他断点配置
  
  // 分页器配置
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },

  // 导航箭头配置
  navigation: {
    nextEl: ".button-next",
    prevEl: ".button-prev"
  },

  // 滚动条配置
  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true
  }
});
</script>

补充说明 #

• slidesPerView: 'auto'会让每个slide的宽度由内部图片宽度决定，配合固定高度容器，实现图片按比例自适应显示。
• 若需在小屏幕调整显示逻辑，可在断点中设置spaceBetween等参数，但不要设置固定的slidesPerView数值。

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