Swiper 插件 jQuery 封装。
使用说明：
- 获取 Amaze UI Swiper
- 直接下载
- 使用 NPM:
npm install amazeui-swiper
- 引入 Swiper 样式（位于
dist目录下的 CSS）：
<link rel="stylesheet" href="path/to/amazeui.swiper.min.css"/>- 在 jQuer 后面引入 Swiper 插件（位于
dist目录下）：
<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.swiper.min.js"></script>- 添加 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>- 根据需要设置 Swiper 尺寸
.swiper-container {
width: 600px;
height: 300px;
}- 初始化 swiper:
$(function() {
$('#mySwiper').swiper();
});将分页和上下导航的选择符改为不同的 class 或 id 即可。
不知道作者为何这样设计，绑定事件的时候没有设定选择符的上下文，如果选择符相同，就会选择到所有的 swiper。
$('#demo27').swiper({
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
});