amazeui-swiper

    0.0.5 • Public • Published

    Amaze UI Swiper


    NPM version Dependency Status devDependency Status

    Swiper 插件 jQuery 封装。

    使用说明:

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

    Install

    npm i amazeui-swiper

    DownloadsWeekly Downloads

    0

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • avatar