实现支持可变宽高比图片的居中Swiper缩略式轮播问题求助

需求说明 #

希望在Swiper轮播中使用任意尺寸图片，实现中间为大尺寸激活图片、其余为缩略图的效果。

修改后完整代码 #

JavaScript 配置 #

var mySwiper = new Swiper(".swiper-container", {
    spaceBetween: 20,
    autoHeight: false,
    slidesPerView: 'auto', // 自动适配slide宽度
    centeredSlides: true,
    roundLengths: false,
    loop: true,
    autoplay: true,
    slideToClickedSlide: true, // 点击缩略图切换到对应slide
    watchSlidesProgress: true, // 监听slide进度，确保激活状态准确
    watchSlidesVisibility: true, // 控制slide可见性
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
});

CSS 样式 #

.swiperTitle{
    text-align:center; 
    margin-block:3rem; 
    font-size:2rem;
}
.swiper-container {
    width:80vw;
    margin-top:3rem;
}
.swiper-container .swiper-wrapper{
    align-items: center; /* 所有slide垂直居中 */
}
/* 普通缩略图slide样式 */
.swiper-container .swiper-slide {
    width: 100px;
    height: 80px;
    transition: all 0.3s ease; /* 添加过渡动画 */
}
.swiper-container .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪适配 */
    border-radius: 4px; /* 可选：添加圆角优化视觉 */
}
/* 激活状态的大图slide */
.swiper-slide.swiper-slide-active {
    width: auto;
    height: 400px;
}
.swiper-slide.swiper-slide-active img{
    object-fit: contain; /* 大图完整显示，保持比例 */
    border-radius: 8px;
}

HTML 结构 #

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiperTitle ">
    <h1>I'm Center</h1>
</div>
<div class="swiper-container ">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846190/slides/gm1aj021pqkvgwxmqh2m.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846167/slides/hrxfcjedxuqjxu1vlmnk.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846133/slides/cpvj6m4vskamatcb6cyx.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846133/slides/krypp2ay6jfy3s7cacxz.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846133/slides/x6wdikxysfxnhuxbuq6x.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846132/slides/womfztcdbqm7cktnrgw6.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846166/slides/aned0mhlxw6oejphkxhr.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846132/slides/vh3xdynitltekz5oaxht.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide6_kvs1ak.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350948/slide2_fnns1s.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide4_lmx2jc.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350952/slide8_im3qdf.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide4_lmx2jc.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide4_lmx2jc.webp">
        </div>
        <div class="swiper-slide">
            <img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846166/slides/mumlvyxkrallvxc90j3i.webp">
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

关键修改说明 #

• JS配置优化：将slidesPerView设为auto，让Swiper根据slide实际宽度自动计算显示数量；开启slideToClickedSlide支持点击缩略图切换；添加watchSlidesProgress和watchSlidesVisibility确保激活状态的准确性。
• CSS样式调整：把swiper-wrapper的对齐方式改为center，让所有slide垂直居中；给普通slide设置固定的缩略图尺寸，激活slide设置大尺寸；通过object-fit: cover（缩略图）和object-fit: contain（大图）保证任意尺寸图片适配且不变形；添加过渡动画让切换更流畅。
• 移除冗余代码：删除了无效的swiper-slide-next/swiper-slide-prev空样式，去掉不必要的!important减少样式冲突。

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