Amaze UI Swiper

---

Swiper 插件 jQuery 封装。

• 使用示例
• API 文档

使用说明：

1. 获取 Amaze UI Swiper

• 直接下载
• 使用 NPM: npm install amazeui-swiper

1. 引入 Swiper 样式（位于 dist 目录下的 CSS）：

<link rel="stylesheet" href="path/to/amazeui.swiper.min.css"/>

1. 在 jQuer 后面引入 Swiper 插件（位于 dist 目录下）：

<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.swiper.min.js"></script>

1. 添加 HTML 结构

根据情况可以删除一些不必要的标记。

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
 
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

1. 根据需要设置 Swiper 尺寸

.swiper-container {
    width: 600px;
    height: 300px;
}

1. 初始化 swiper:

$(function() {
    $('#mySwiper').swiper();
});

常见问题

点击特定 Swiper 导航的时候所有 Swiper 一起跟着动？

将分页和上下导航的选择符改为不同的 class 或 id 即可。

不知道作者为何这样设计，绑定事件的时候没有设定选择符的上下文，如果选择符相同，就会选择到所有的 swiper。

$('#demo27').swiper({
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  pagination: '.swiper-pagination',
});