html里面怎么引入swiper,JavaScript库——使用swiper.js创建嵌套的swiper

相信在项目中使用过swiper.js的同学会跟我一样，觉得这个软件真的很好用。首先API调用简单，其次就是他的官方文档写得非常之详细，非常容易上手。

自己在项目中使用swiper.js很长时间了，这里根据自己的一些经验和心得对swiper.js进行总结。

swiper.js官网

嵌套两个或多个siwper根据官方文档，我们创建一个swiper是非常简单的，但是如何创建两个swiper，这对于一些新手小白来说可能比较迷茫。这里先给出代码，然后再进行解释。

示例代码下载并引入swiper文件：

HTML代码：

我是父亲swiper的第一个slide

我是父亲swiper的第二个slide

我是父亲swiper的第三个slide

我是儿子swiper的第一个slide

我是儿子swiper的第二个slide

我是儿子swiper的第三个slide

我是儿子swiper的第四个slide

CSS代码：*{

padding: 0;

margin: 0;

}

.swiper-container{

width: 100vw; /*100vw的意思是宽度和浏览器窗口的宽度一样*/

height: 100vh; /*100vh的意思是宽度和浏览器窗口的高度一样*/

}JavaScript代码：var first_swiper=new Swiper('.first-one',{

// 这里可以不写任何东西，swiper会按照默认参数进行初始化

});

var second_swiper=new Swiper('.second-one',{

// 这里可以不写任何东西，swiper会按照默认参数进行初始化

});

使用总结其实创建嵌套swiper很简单，就是在一个已经创建好的swiper中，确定我们在哪一个slide中创建我们的第二个swiper。然后就按照我们创建第一个swiper的样子来书写HTML代码。

HTMl代码书写好之后，我们就要使用JavaScript脚本来初始化我们的两个swiper。这个时候有的同学就会问，我如何来区分两个swiper呢？注意看我们的HTML代码中，我分别给两个swiper加了一个class="fitst-one"和class="second-one"。这样我们就可以区分两个swiper，然后在JavaScript脚本中初始化swiper的时候，就是用这两个class分别来初始化两个swiper。

这样，我们便可以成功创建两个嵌套的swiper。如果你要创建多个嵌套的swiper，也采用类似的方法，但是不建议嵌套过多的swiper，根据我的个人经验，可能会出现一些bug。

注意事项仔细观察上面给出的HTML代码，我们是将子swiper嵌套在父swiper的最后一个slide中，这样在初始化swiper的时候，不进行额外的配置，也不会有什么问题。

但是如果我们将子swiper嵌套在父swiper的中间的slide中，这个时候我们只能看到子swiper的第一个slide。例如我们的HTML代码采用下面的写法：

我是父亲swiper的第一个slide

我是儿子swiper的第一个slide

我是儿子swiper的第二个slide

我是儿子swiper的第三个slide

我是儿子swiper的第四个slide

我是父亲swiper的第二个slide

我是父亲swiper的第三个slide

这个时候，我们在滑动slide的时候，分别会看到下面的文字：我是父亲swiper的第一个slide

我是儿子swiper的第一个slide

我是父亲swiper的第二个slide

我是父亲swiper的第三个slide

这个时候是我们的初始化的问题，如果想看到子swiper全部的slide，那么需要在初始化子swiper的时候，额外配置一些选项，即设置nested:true。用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。var first_swiper=new Swiper('.first-one',{

// 这里可以不写任何东西，swiper会按照默认参数进行初始化

});

var second_swiper=new Swiper('.second-one',{

nested:true

});

html里面怎么引入swiper,JavaScript库——使用swiper.js创建嵌套的swiper相关推荐

Vue引入第三方JavaScript库和如何创建自己的Vue插件
一第三方JavaScript库前言 .vue文件中不解析 script标签引入js文件,只能用 import 引入有两种用法: 1.import a from '-/a' 2.import ' ...
「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源
包管理器托管JavaScript库并提供用于获取和打包它们的工具. npm - npm是JavaScript的包管理器. Bower - 网络包管理器. component - 用于构建更好的Web ...
三十五、jQuery（JavaScript 库）
文章目录 jQuery 概述 jQuery 的使用入口函数了解 jQuery 的 $ 符号 jQuery对象与DOM对象之间的转换(难点) jQuery选择器(重点) jQuery基本选择器层级 ...
Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库
Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库:Clipboard.js. \\ 在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示 ...
html5画布作品,10款面向HTML5 画布(Canvas)的JavaScript库
Processing.js Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下,可以实现程序图像.动画和互动的应用.Processing.js是轻量,易于了解掌 ...
cesium雷达图_20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...
高效管理ASP.NET的JavaScript库
简介对于ASP.NET开发人员来说,管理项目中的JavaScript都很随意: 我想这很大程度上可能是因为网上没有如何妥善处理ASP.NET中JavaScript的可靠信息.此文的目的就是提供一种最 ...
最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
25个恶意JavaScript 库通过NPM官方包仓库分发
聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士专栏·供应链安全数字化时代,软件无处不在.软件如同社会中的"虚拟人",已经成为支撑社会正常运转的最基本元素之一,软件的安全 ...
ionic3.0--angular4.0 引入第三方插件库的方法
ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings 2.搜索你 ...

html里面怎么引入swiper,JavaScript库——使用swiper.js创建嵌套的swiper

html里面怎么引入swiper,JavaScript库——使用swiper.js创建嵌套的swiper相关推荐

最新文章

热门文章