Swiper 入门指南：快速创建轮播图

Swiper 是一款现代化的移动端触控滑块库，支持多种方向滑动、分页器、导航按钮等丰富功能，深受开发者喜爱。

为什么选择 Swiper？

• 🎯 移动优先，专为移动设备优化
• ⚙️ 功能强大，支持横向/纵向滑动、自动播放、懒加载等
• 📦 模块化设计，按需引入插件
• 🌍 文档齐全，支持社区生态与第三方封装

如何开始使用

你可以通过 CDN 快速引入 Swiper：

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

基础 HTML 结构

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">幻灯片1</div>
    <div class="swiper-slide">幻灯片2</div>
    <div class="swiper-slide">幻灯片3</div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

初始化 Swiper

<script>
  const swiper = new Swiper('.swiper', {
    loop: true,
    autoplay: {
      delay: 3000,
    },
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

常用配置项

• loop：是否循环播放
• autoplay：自动播放间隔
• pagination：是否显示分页器
• navigation：左右箭头控制
• effect：支持 slide、fade、cube 等切换效果

结语

Swiper 是一个非常适合入门和实战项目的轮播解决方案。如果你刚接触前端，Swiper 会是一个值得尝试的组件。

更多功能请参考其官方文档：https://swiperjs.com/