实例 1：基础轮播（默认配置）
最基础的 Swiper 用法，仅包含核心容器结构。
<!-- 核心容器 -->
<div class="swiper">
<!-- 包装器（必需） -->
<div class="swiper-wrapper">
<!-- 幻灯片 -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
// JS 初始化：
new Swiper('.swiper');
实例 2：带分页器的轮播
添加分页器（pagination），显示当前位置，可点击切换。
new Swiper('.swiper-pagination-demo', {
pagination: {
el: '.swiper-pagination', // 分页器容器选择器
clickable: true // 是否可点击切换
}
});
实例 3：带导航按钮的轮播
添加左右导航按钮，方便用户手动切换。
new Swiper('.swiper-nav-demo', {
navigation: {
nextEl: '.swiper-button-next', // 下一页按钮
prevEl: '.swiper-button-prev' // 上一页按钮
},
loop: true // 无限循环
});
实例 4：自动播放轮播
设置 autoplay 实现自动轮播，鼠标悬停时暂停。
new Swiper('.swiper-autoplay-demo', {
autoplay: {
delay: 2000, // 切换间隔（毫秒）
disableOnInteraction: false // 用户操作后是否继续自动播放
},
pagination: { el: '.swiper-pagination' },
loop: true
});
实例 5：多图展示（slidesPerView）
设置 slidesPerView 同时显示多张，spaceBetween 设置间距。
new Swiper('.swiper-multi-demo', {
slidesPerView: 3, // 同时显示 3 张
spaceBetween: 20, // 间距 20px
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
breakpoints: { // 响应式断点
768: { slidesPerView: 2 },
480: { slidesPerView: 1 }
}
});
实例 6：卡片露出效果（Peek Effect）
左侧完整显示，右侧露出部分内容，提示用户可滑动。
new Swiper('.swiper-peek-demo', {
slidesPerView: 'auto', // 自动计算显示数量
centeredSlides: false, // 不居中
spaceBetween: 20, // 间距
slidesOffsetBefore: 0, // 左侧偏移
slidesOffsetAfter: 0, // 右侧偏移
// 通过 CSS padding 实现露出效果
});
// CSS:
.peek-effect { padding: 0 40px; }
实例 7：淡入淡出效果（Fade Effect）
幻灯片切换时使用淡入淡出动画，平滑过渡。
new Swiper('.swiper-fade-demo', {
effect: 'fade', // 淡入淡出效果
fadeEffect: {
crossFade: true // 交叉淡入淡出
},
pagination: { el: '.swiper-pagination' },
autoplay: { delay: 3000 },
loop: true
});
实例 8：3D 翻转效果（Flip Effect）
幻灯片像翻书一样翻转，适合卡片式展示。
new Swiper('.swiper-flip-demo', {
effect: 'flip', // 翻转效果
flipEffect: {
slideShadows: false // 关闭阴影
},
pagination: { el: '.swiper-pagination' },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
loop: true
});
实例 9：3D 立方体效果（Cube Effect）
幻灯片像立方体一样旋转，视觉冲击力强。
new Swiper('.swiper-cube-demo', {
effect: 'cube', // 立方体效果
cubeEffect: {
shadow: true, // 开启阴影
slideShadows: true, // 幻灯片阴影
shadowOffset: 20, // 阴影偏移
shadowScale: 0.94 // 阴影缩放
},
pagination: { el: '.swiper-pagination' },
loop: true
});
实例 10：真实图片轮播（综合示例）
结合自动播放、分页器、导航按钮、响应式等功能。
new Swiper('.swiper-image-demo', {
slidesPerView: 1,
spaceBetween: 0,
autoplay: { delay: 4000 },
pagination: { el: '.swiper-pagination', clickable: true },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
loop: true,
breakpoints: {
768: { slidesPerView: 2, spaceBetween: 15 },
1024: { slidesPerView: 3, spaceBetween: 20 }
}
});