amazeui-swiper v0.0.5

Amaze UI Swiper

Swiper 插件 jQuery 封装。

• 使用示例
• API 文档

使用说明：

1. 获取 Amaze UI Swiper

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

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

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

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

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

4. 添加 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>

5. 根据需要设置 Swiper 尺寸

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

6. 初始化 swiper:

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

常见问题

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

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

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

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