Most modern mobile touch slider with hardware accelerated transitions.
JavaScript CSS
Latest commit 1649db0 Jul 6, 2016 minwe bump v0.0.5
Permalink
Failed to load latest commit information.
dist bump v0.0.5 Jul 6, 2016
docs v0.0.2: fixes npm publish Jun 19, 2015
less initial commit Jun 18, 2015
lib initial commit Jun 18, 2015
.editorconfig initial commit Jun 18, 2015
.eslintrc bump v0.0.4 Jul 6, 2016
.gitignore bump v0.0.4 Jul 6, 2016
.npmignore bump v0.0.4 Jul 6, 2016
LICENSE initial commit Jun 18, 2015
README.md initial commit Jun 18, 2015
gulpfile.js v0.0.2: fixes npm publish Jun 19, 2015
package.json bump v0.0.5 Jul 6, 2016

README.md

Amaze UI Swiper


NPM version Dependency Status devDependency Status

Swiper 插件 jQuery 封装。

使用说明:

  1. 获取 Amaze UI 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',
});