npm 包 cir-swipe 使用教程

简介

cir-swipe 是一个基于 vanilla JavaScript 开发的全新 Swipe 组件，可以轻松实现移动端的轮播图功能。

安装

使用 npm 安装 cir-swipe：

--- ------- --------- ------

使用方法

引入

在你的 html 文件中引入 cir-swipe：

------- --------------------------------------------------------------

初始化

实例化 Swipe 对象：

----- ------ - --- ------
  --------------------
  -
    -- --
  -
--

第一个参数为容器的选择器，如果你的容器 class 为 swiper-container，那么选择器为 ".swiper-container"。

第二个参数为配置选项。可以配置的选项如下：

  • initialSlide：初始显示的 slide 索引，默认值为 0。
  • speed：切换速度，单位是毫秒，默认值为 300。
  • auto：是否开启自动播放，可以设置为一个时间间隔，单位是毫秒。例如：auto: 5000 表示每 5 秒自动切换一次。
  • loop：是否循环播放，默认为 true。
  • stopPropagation：是否停止事件冒泡，默认为 false。
  • disableScroll：是否禁止容器滚动，默认为 true。
  • on：自定义事件回调，支持 beforeChange 和 afterChange。

HTML 结构

cir-swipe 的 HTML 结构如下：

---- -------------------------
  ---- -----------------------
    ---- ---------------------
      ---- --- ------ ---
    ------
    ---- ---------------------
      ---- --- ------ ---
    ------
    ---- ---------------------
      ---- --- ------ ---
    ------
  ------
------

CSS 样式

添加以下样式：

----------------- -
  --------- ---------
  --------- -------
-
--------------- -
  -------- -----
  ----------- --------- ---- ---------
-
------------- -
  ------------ --
  ------ -----
-

完整示例代码

--------- -----
------
  ------
    ----- --------------- --
    ----- --------------- ---------------------------- ------------------ --
    ---------------- ------------
    -------
      ----------------- -
        --------- ---------
        --------- -------
        ------ -----
        ------- ------
      -

      --------------- -
        -------- -----
        ----------- --------- ---- ---------
      -

      ------------- -
        ------------ --
        ------ -----
        ------- -----
      -

      -------------------------- -
        ----------------- --------
      -

      -------------------------- -
        ----------------- --------
      -

      -------------------------- -
        ----------------- --------
      -

      -------------- -
        --------- ---------
        ------- -----
        ----- --
        ------ --
        ----------- -------
      -

      -------------- ------ -
        ---------- -----
        ------------- -----
        ----------------- -----
        ------- --- ----- -----
        -------------- ----
        ------ -----
        ------- -----
        ------- --------
        ----------- ------------ ---- ---------
      -

      -------------- ------------ -
        ------------- -----
      -
    --------
  -------

  ------
    ---- -------------------------
      ---- -----------------------
        ---- ---------------------
          ---- --- ------ ---
          ---------------
        ------
        ---- ---------------------
          ---- --- ------ ---
          ---------------
        ------
        ---- ---------------------
          ---- --- ------ ---
          ---------------
        ------
      ------
      ---- ----------------------
        ------- --------------------------
        ------- --------------------------
      ------
    ------

    ------- --------------------------------------------------------------
    --------
      ----- ------ - --- -------------------------- -
        ------------- --
        ------ ----
        ----- -----
        ----- -----
        ---------------- ------
        -------------- -----
        --- -
          ------------- ----------- --------- -- -
            ----------------------------- - ------
          --
          ------------ ----------- --------- -- -
            ----------------------------- - ------
          --
        --
      ---

      ----- ------- - --------------------------------
      ----- ------- - --------------------------------

      --------------------------------- -- -- -
        --------------
      ---

      --------------------------------- -- -- -
        --------------
      ---
    ---------
  -------
-------

总结

使用 cir-swipe 组件，可以轻松实现移动端的轮播图功能。本文详细介绍了 cir-swipe 的安装、初始化、HTML 结构、CSS 样式和完整示例代码，希望能对大家的前端开发工作有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f71238a385564ab6764

阅读全文

猜你喜欢

  • npm 包 weepub 使用教程

    本文将会介绍并教授如何使用 npm 包 weepub，该包专为前端开发者设计，并提供了一些实用的工具和方法，以便更好地处理和管理您的 Web 应用程序。 简介 weepub 是一个基于 JavaScr...

    3 年前
  • npm 包 gulp-real-rebase 使用教程

    在前端开发中，我们经常会需要重新制定文件路径或者重命名文件。这时候，我们可以使用 gulp 插件 gulp-real-rebase 来实现这个功能。在本文中，我们将会介绍如何使用 gulp-real-...

    3 年前
  • npm 包 owen-react-library 使用教程

    在前端开发过程中，我们通常需要使用一些第三方库来帮助我们更快地完成项目。npm 是一个很好的工具，可以让我们方便地安装和管理这些第三方库。今天我们要介绍的是一个优秀的 npm 包：owen-react...

    3 年前
  • npm 包 damngdpr 使用教程

    在现代 web 开发中，保护用户隐私数据是必不可少的。GDPR（General Data Protection Regulation）是一项欧盟法规，对保护个人数据提供了强制性的要求。

    3 年前
  • npm 包 @bretkikehara/react-table 使用教程

    前言 在 Web 开发中，表格展示数据是非常常见的一种 UI 元素，而对于前端来说，去手写一个可复用的表格组件是颇为繁琐的一项任务。但好在现在有很多第三方的表格组件库可供使用，并且这些组件库常常非常易...

    3 年前
  • npm 包 kattvalp 使用教程

    介绍和背景 kattvalp 是一款 npm 包，它是 JavaScript 中的一个基于 Node.js 和 TypeScript 的 HTTP 客户端工具。kattvalp 借助了 axios 网...

    3 年前
  • npm 包 Rpscript-api-robotjs 使用教程

    Rpscript-api-robotjs 是一款基于 robotjs 模块封装成的 npm 包，它提供了简单的 api，方便前端开发者在编写脚本时自动化执行鼠标、键盘操作以及屏幕截图等操作。

    3 年前
  • npm 包 @libertyware/build-angular 使用教程

    简介 在前端开发中，构建工具是必不可少的环节。而 @libertyware/build-angular 是一个基于 Angular 的构建工具，帮助开发者快速搭建 Angular 环境，并帮助构建 A...

    3 年前
  • npm 包 @carlos22ivan/kscli 使用教程

    @carlos22ivan/kscli 是一个基于 Node.js 开发的命令行工具，它可以用来快速创建和管理项目，适用于前端开发。 安装 可以使用 npm 进行安装： --- ------- -- ...

    3 年前
  • npm 包 cryptolock 使用教程

    Cryptolock 是一个用于加密和解密数据的 npm 包。它使用 AES 加密算法，能够对数据进行安全加密和解密操作。在前端开发中，数据加密具有非常重要的意义，特别是在用户密码等数据安全方面，尤其...

    3 年前
  • NPM包Pug.js使用教程

    前言 Pug.js是一个流行的模板引擎，它能够轻松地将Pug代码转换为HTML。Pubsg是一个基于Pug的CSS样式库，使用者能够通过Pug的语法很容易地使用到Pubsg的样式。

    3 年前
  • npm 包 cloud-config-toolkit 使用教程

    在开发前端应用的过程中，我们经常需要管理配置数据。这些数据可能包含不同环境的数据库地址、API 地址、域名等等。手动管理这些数据很麻烦，而 cloud-config-toolkit 这款 npm 包则...

    3 年前
  • npm 包 cloud-config-toolkit-ajv 使用教程

    介绍 cloud-config-toolkit-ajv 是一个基于 AJV 的云配置工具包，可以帮助你在前端中以一种简单的方式获取和管理云配置。AJV 是一个快速的 JSON Schema 验证器，它...

    3 年前
  • npm 包 react-advanced-loader 使用教程

    简介 react-advanced-loader 是一个基于 React 和 Webpack 的 npm 包，它能够帮助开发者在 React 项目中更高效、优雅地加载组件和资源。

    3 年前
  • npm 包 sabius-manager-auth 使用教程

    在前端开发中，为了简化代码和提高开发效率，我们经常使用各种 npm 包。其中，sabius-manager-auth 是一款用于管理认证功能的 npm 包，可以帮助我们方便地实现身份认证功能。

    3 年前
  • npm 包 react-full-page-loader 使用教程

    在前端开发中，页面加载速度是非常重要的一项指标。为了提升用户体验，我们通常会考虑使用一些加载动画来提示用户页面正在加载中。在 React 中，我们可以利用第三方的 npm 包 react-full-p...

    3 年前
  • npm 包 @nearest/nearest-sdk 使用教程

    前言 @nearest/nearest-sdk 是一个针对定位和地图开发的 JavaScript SDK，该 SDK 提供了灵活可扩展的接口和工具，使我们可以轻松地开发和集成定位、导航、路径规划和地图...

    3 年前
  • npm 包 oncloud.proxy 使用教程

    简介 oncloud.proxy 是一个帮助前端开发者简单易用地实现跨域请求的 npm 包。它可以通过配置指定需要跨域的接口以及需要将请求转发到的服务器地址，进而达到解决跨域问题的目的。

    3 年前
  • npm 包 @smartnewbs/feathersjs-hook-users 使用教程

    简介 @smartnewbs/feathersjs-hook-users 是一个适用于 FeathersJS 框架的 npm 包，它可以帮助开发人员方便地管理用户账户、权限等相关逻辑，从而减少开发工作...

    3 年前
  • NPM包gulp-jason-jsdoc使用教程

    介绍 gulp-jason-jsdoc是一个用于自动生成JavaScript的文档工具，它可以使用Gulp流式处理构建出文档。JSDoc生成器是一种将Javascript源代码转换为HTML文档的工具...

    3 年前

相关推荐

    暂无文章