如何在网页项目中实现Swiper JS的Carousel Slider轮播动画？

1. 引入Swiper资源 #

你可以直接从Swiper官网下载本地的CSS和JS文件，也可以用CDN引入（直接在HTML头部添加以下代码即可）：

<!-- 引入Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- 引入Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

2. 编写轮播的HTML结构 #

创建基础轮播容器结构，核心包含外层容器、轮播项包裹层和单个轮播项：

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="你的图片地址1" alt="轮播图1"></div>
    <div class="swiper-slide"><img src="你的图片地址2" alt="轮播图2"></div>
    <div class="swiper-slide"><img src="你的图片地址3" alt="轮播图3"></div>
  </div>
  <!-- 可选：添加点击切换的分页器 -->
  <div class="swiper-pagination"></div>
  <!-- 可选：添加左右切换按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

3. 初始化Swiper实例 #

在HTML底部或单独的JS文件中添加初始化代码，配置滑动动画及功能：

const swiper = new Swiper('.swiper', {
  // 开启循环轮播
  loop: true,
  // 设置滑动动画类型（默认是slide，还支持fade、cube、coverflow等）
  effect: 'slide',
  // 自动播放配置
  autoplay: {
    delay: 3000, // 每3秒切换一次
    disableOnInteraction: false, // 用户交互后不停止自动播放
  },
  // 启用分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  // 启用左右导航按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

4. 自定义滑动动画（可选） #

如果需要个性化效果，可通过CSS自定义轮播项的过渡状态：

.swiper-slide {
  transition: all 0.5s ease;
}
.swiper-slide-active {
  transform: scale(1.05);
  opacity: 1;
}
.swiper-slide-prev, .swiper-slide-next {
  transform: scale(0.95);
  opacity: 0.7;
}

注意：若使用本地下载的Swiper文件，需确保CSS和JS文件的路径设置正确，避免加载失败。

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