如何使用slick/swiper等插件或原生代码实现指定slider效果？

你需要实现的是居中卡片放大、两侧卡片部分露出的3D透视轮播效果，以下是三种可落地的实现方式：

方案1：使用Swiper实现（推荐，配置成本最低） #

Swiper官方自带Coverflow效果模块，完全匹配需求，仅需简单配置即可实现。

• 安装依赖：使用npm安装执行npm i swiper，也可以直接引入CDN资源
• 基础HTML结构

<div class="swiper carousel">
  <div class="swiper-wrapper">
    <div class="swiper-slide">卡片1内容</div>
    <div class="swiper-slide">卡片2内容</div>
    <div class="swiper-slide">卡片3内容</div>
    <div class="swiper-slide">卡片4内容</div>
    <div class="swiper-slide">卡片5内容</div>
  </div>
  <!-- 按需添加分页器、前后导航按钮 -->
  <div class="swiper-pagination"></div>
</div>

• 初始化配置

import Swiper from 'swiper';
import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
// 引入对应样式
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

new Swiper('.carousel', {
  modules: [EffectCoverflow, Pagination, Navigation],
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  loop: true, // 按需开启循环轮播
  coverflowEffect: {
    rotate: 0, // 两侧卡片旋转角度，不需要旋转设为0即可，要3D翻转效果可设为20-50
    stretch: 0,
    depth: 100, // 透视深度，数值越大两侧卡片越靠后
    modifier: 1,
    slideShadows: false, // 按需开启卡片阴影
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

• 补充基础样式

.swiper-slide {
  width: 320px; // 按设计稿调整卡片宽度
  height: 420px; // 按设计稿调整卡片高度
}

方案2：使用Slick实现 #

如果项目已经在使用Slick插件，也可以通过配置实现类似效果：

• 安装依赖：执行npm i slick-carousel，同时需要依赖jQuery
• 初始化配置

$('.carousel').slick({
  centerMode: true,
  centerPadding: '80px', // 两侧卡片露出的宽度
  slidesToShow: 3,
  infinite: true,
  speed: 300,
  arrows: true,
  dots: true
});

• 补充缩放样式

.slick-slide {
  transform: scale(0.8);
  opacity: 0.7;
  transition: all 0.3s ease;
}
.slick-center {
  transform: scale(1);
  opacity: 1;
}

方案3：原生JS实现（无第三方依赖） #

如果不想引入任何插件，可以用原生JS配合CSS transform实现核心逻辑：

• 基础HTML结构

<div class="carousel-container">
  <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>
  <button class="prev-btn">上一张</button>
  <button class="next-btn">下一张</button>
</div>

• 核心JS逻辑

const slides = document.querySelectorAll('.slide');
const slideCount = slides.length;
let currentIndex = 0;
const cardWidth = 320; // 卡片宽度，和CSS保持一致

function updateSlider() {
  slides.forEach((slide, index) => {
    // 计算当前卡片和居中卡片的偏移差
    const offset = index - currentIndex;
    // 缩放比例：居中卡片为1，两侧每偏一张缩小0.2
    const scale = 1 - Math.abs(offset) * 0.2;
    // 横向偏移：左偏的往左移，右偏的往右移
    const translateX = offset * (cardWidth + 40); // 40是卡片间距，按需调整
    // 层级：居中卡片层级最高，两侧依次降低
    const zIndex = slideCount - Math.abs(offset);
    // 透明度：两侧卡片透明度降低
    const opacity = 1 - Math.abs(offset) * 0.3;

    slide.style.cssText = `
      transform: translateX(${translateX}px) scale(${scale});
      z-index: ${zIndex};
      opacity: ${opacity};
    `;
  })
}

// 切换事件
document.querySelector('.next-btn').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slideCount;
  updateSlider();
})
document.querySelector('.prev-btn').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slideCount) % slideCount;
  updateSlider();
})

// 初始化
updateSlider();

• 基础CSS样式

.carousel-container {
  position: relative;
  height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide {
  position: absolute;
  width: 320px;
  height: 420px;
  border-radius: 12px;
  background: #fff;
  transition: all 0.3s ease;
}

内容的提问来源于stack exchange，提问作者Md. Ripon Islam