Swiper 的引入

1. 从官网下载必要资源 https://www.swiper.com.cn/download/index.html#file1

2. 在项目中<head>中引入swiper.min.css

<!-- Link Swiper's CSS -->

  <link rel="stylesheet" href="../dist/css/swiper.min.css">

3. 编辑框架代码

  <!-- Swiper -->

  <div class="swiper-container">

    <div class="swiper-wrapper">

      <div class="swiper-slide"><img src="../img/bg01.png" alt=""></div>

      <div class="swiper-slide"><img src="../img/bg02.png" alt=""></div>

      <div class="swiper-slide"><img src="../img/bg03.png" alt=""></div>

    </div>

    <!-- Add Pagination -->

    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->

    <div class="swiper-button-next"></div>

    <div class="swiper-button-prev"></div>

  </div>

4.在<body>中框架代码下面引入 swiper.min.js

<!-- Swiper JS -->

  <script src="../dist/js/swiper.min.js"></script>

5. 初始化swiper

<!-- Initialize Swiper -->

  <script>

    var swiper = new Swiper('.swiper-container', {

      spaceBetween: 30,

      centeredSlides: true,

      autoplay: {

        delay: 2500,

        disableOnInteraction: false,

      },

      pagination: {

        el: '.swiper-pagination',

        clickable: true,

      },

      navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

      },

    });

  </script>

最终代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Swiper demo</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->

  <link rel="stylesheet" href="../dist/css/swiper.min.css">

  <!-- Demo styles -->

  <style>

    html, body {

      position: relative;

      height: 100%;

    }

    body {

      background: #eee;

      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

      font-size: 14px;

      color:#000;

      margin: 0;

      padding: 0;

    }

    .swiper-container {

      width: 100%;

      height: 100%;

    }

    .swiper-slide {

      text-align: center;

      font-size: 18px;

      background: #fff;

      /* Center slide text vertically */

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      -webkit-justify-content: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      -webkit-align-items: center;

      align-items: center;

    }

  </style>

</head>

<body>

  <!-- Swiper -->

  <div class="swiper-container">

    <div class="swiper-wrapper">

      <div class="swiper-slide"><img src="../img/bg01.png" alt=""></div>

      <div class="swiper-slide"><img src="../img/bg02.png" alt=""></div>

      <div class="swiper-slide"><img src="../img/bg03.png" alt=""></div>

    </div>

    <!-- Add Pagination -->

    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->

    <div class="swiper-button-next"></div>

    <div class="swiper-button-prev"></div>

  </div>

  <!-- Swiper JS -->

  <script src="../dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->

  <script>

    var swiper = new Swiper('.swiper-container', {

      spaceBetween: 30,

      centeredSlides: true,

      autoplay: {

        delay: 2500,

        disableOnInteraction: false,

      },

      pagination: {

        el: '.swiper-pagination',

        clickable: true,

      },

      navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

      },

    });

  </script>

</body>

</html>

Swiper 的引入的更多相关文章

angular4.0如何引入外部插件1：import方案
引入外部插件是项目中非常重要的环节.因为部分插件以js语法写的,而ng4用的是ts语法,所以在引入时需要配置. Step1:引入swiper插件的js文件[css在下面会讲到,先别急] 很重要的意见: ...
使用Swiper快速实现3D效果轮播
最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现引入首先我们介绍原 ...
ES6小点心第二弹——底部浮现弹窗
小点心,顾名思义,开箱即食,拿来即用. 献上第二个小点心:SlidePopup. GitHub 在线演示 GitHub 上欢迎大家来找茬^_^ 前端朋友们,今天要介绍的这款小点心牛B了.相信是个前端都 ...
微信WeUI扩展组件
主要包括下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class=" ...
vue-awesome-swiper插件爬坑
最近自己在做一个基于vue的知乎的移动端单页面,遇到很多坑,先说一下遇到最大的坑,其实并不推荐使用 vue-awesome-swiper,如果项目应用轮播,切换少的话.言归正传,现在来介绍vue-aw ...
react网页版聊天|仿微信、微博web版|react+pc端仿微信实例
一.项目介绍基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...
jQuery中的工具和插件
jQuery的工具属性 jQuery类数组操作 length属性表示获取类数组中元素的个数 get()方法表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...
vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...
vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

随机推荐

codeblocks无法识别的16位程序解决方法
被codeblocks心态搞崩了,分享一下经验给大家,具体就是无法运行编译好的程序,还有就是调试功能没法用. 查了很多资料,自己搞了一个终极解决方法:1卸载codeblocks,2打开我的电脑,全盘搜 ...
P2951 【[USACO09OPEN]捉迷藏Hide and Seek】
典型的最短路,而且只要再加一点点操作,就能得到答案所以可以直接套模板具体看程序:: #include<cstdio> #include<queue>//队列专属头文件 #i ...
oracle truncate表恢复操作
truncate恢复表 1.创建测试用表 conn elan/elan create table haha as select * from dba_users; 2.查询表数据 ) from hah ...
Python 正则匹配网页内的IP地址及端口号
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2017-08-30 20:38:23 # @Author : EnderZhou (z ...
Python 爬取SeeBug poc
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2017-08-24 21:42:52 # @Author : EnderZhou (z ...
tez
参考: 原理: https://www.cnblogs.com/rongfengliang/p/6991020.html https://www.cnblogs.com/hankedang/p/421 ...
LayaAir疑难杂症之四：laya引擎自动断点到bundle.js文件中且无报错，但程序不再执行
在一次断点调试中,突然程序不再按照博主指定的断点执行,莫名其妙端点到了bundle.js文件中的某一行中,这是不应该的,第一次时间反应就是引擎出了问题,但是总不能让博主卸载重装吧. 经过查找资料,询问 ...
【6.28校内test】T1 Jelly的难题1
Jelly的难题[题目链接] 废话一句:今天中考出成绩,感觉大家考的都超级棒,不管怎样,愿大家成为最好的自己. 好了废话完了,下面是题解部分: SOLUTION: 首先你可能发生的,是看不懂题: 定睛 ...
django 商城项目之购物车以及python中的一些redis命令
最近在用django restframe框架做一个商城项目,有一个关于购物车的业务逻辑,是用cookie和redis存储的购物车信息,在这里记录一下. 完成一个商城项目,如果不做一个购物车,就是十分可 ...
Python爬虫之简单的爬取百度贴吧数据
首先要使用的第类库有 urllib下的request 以及urllib下的parse 以及 time包 random包之后我们定义一个名叫BaiduSpider类用来爬取信息属性有 url: ...

Swiper 的引入

Swiper 的引入的更多相关文章

随机推荐

热门专题