本文共 2365 字，大约阅读时间需要 7 分钟。

Swiper - 是免费且最现代的移动触摸滑块，具有硬件加速转换和惊人的本机行为。它旨在用于移动网站，移动网络应用程序和移动原生/混合应用程序。主要为iOS设计，但也适用于最新的Android，Windows Phone 8和现代桌面浏览器

Swiper不兼容所有平台，它是一款现代触控滑块，仅专注于现代应用/平台，带来最佳体验和简单性。

Swiper以及其他优秀组件是的一部分- 用于构建iOS和Android应用程序的全功能框架。Swiper也是的默认滑块组件

Swiper入门

1A。下载并安装Swiper

首先，我们需要下载所需的Swiper文件：

• 我们可以从下载它们
• 或者我们可以通过鲍尔安装它们，输入终端：

  $ bower install swiper

• 或者，使用Atmosphere作为流星包：

  $ meteor add nolimits4web:swiper

• 或者，使用NPM

  $ npm install swiper

在下载/安装的软件包中，我们需要文件dist/夹中的文件。

1B。从CDN使用Swiper

如果你不想在你的项目中包含Swiper文件，你可以使用它从。以下文件可用：

2.将Swiper文件包含到网站/应用程序中

之后，我们需要将Swiper的CSS和JS文件包含到我们的网站/应用程序中。在你的html文件中：

    ...    
       ...    

3.添加Swiper HTML布局

现在，我们需要将Swiper布局添加到我们的应用中：

   
   
    
        
    
        
             
     
      Slide 1
     
        
     
      Slide 2
     
        
     
      Slide 3
     
        ...    
    
    
        
    
    
        
    
    
    
    
        
    
   

4. Swiper CSS样式/大小

之后，我们可能需要在CSS文件中设置Swiper大小：

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

5.初始化Swiper

最后，我们需要在JS中初始化Swiper。有几个选项/地方可以做到这一点：

• 最好的选择将在内联脚本或脚本文件中包含在主体的最后（在结束</body>标记之前）：

    ...  

• 如果你在你的站点中使用jQuery / Zepto，那么你可以在你的任何JS文件中初始化它，但要确保你在document.ready事件中完成它：

  $(document).ready(function () {
           //initialize swiper when document ready    var mySwiper = new Swiper ('.swiper-container', {      // Optional parameters      direction: 'vertical',      loop: true    })  });

• 否则（但不推荐），你可以在window.onload事件中初始化它：

  window.onload = function () {
           //initialize swiper when document ready    var mySwiper = new Swiper ('.swiper-container', {      // Optional parameters      direction: 'vertical',      loop: true    })  };

作为CommonJs模块

Swiper与CommonJs模块完全兼容，可以在Node.js环境中使用：

var Swiper = require('swiper');var mySwiper = new Swiper('.swiper-container', { /* ... */ });

作为ES模块

Swiper软件包带有ES模块版本，可以在支持或Webpack或Rollup等捆绑软件的情况下使用：

import Swiper from 'swiper';var mySwiper = new Swiper('.swiper-container', { /* ... */ });

Swiper babel-loader和Dom7的Webpack配置示例：

module: {  rules: [    {      test: /\.js$/, // Check for all js files      exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,      loader: 'babel-loader'    }  ]}

接下来是什么？

如您所见，将Swiper集成到您的网站或应用程序非常简单。所以这是你的下一个步骤：

• 访问以了解更多关于所有Swiper API以及如何控制它的信息。
• 看看可用的。
• 如果您有关于Swiper的问题，请随时在我们的提问。如果你更喜欢那么别忘了用标签标记你的问题。
• 如果发现错误，请在创建问题。

转载地址：https://daqiang.blog.csdn.net/article/details/80606170 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！