swiper轮播图插件

一、简介

①Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。

③主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

二、文档

①中文网址：http://2.swiper.com.cn/

②中文网地址：http://www.swiper.com.cn/

③Swiper目前有Swiper2、Swiper3、Swiper4几个版本，每个版本的使用方法可能会有所不同，具体参照文档

三、使用方法

①加载

首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

      <link rel="stylesheet" href="path/to/swiper.min.css">......<script src="path/to/swiper.min.js"></script>

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js

　　　   ...<link rel="stylesheet" href="path/to/swiper.min.css">...<script src="path/to/jquery.js"></script><script src="path/to/swiper.jquery.min.js"></script>

②HTML内容

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div>
</div>

③初始化

初始化Swiper：最好是挨着</body>标签（函数调用）

<script> var mySwiper = new Swiper ('.swiper-container', {direction: 'vertical',loop: true,// 如果需要分页器
　　　　pagination: '.swiper-pagination',// 如果需要前进后退按钮
　　　　nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',// 如果需要滚动条
　　　　scrollbar: '.swiper-scrollbar',})
</script>
</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化

<script type="text/javascript">window.onload = function() {...}
</script>或者这样（Jquery和Zepto）
<script type="text/javascript">$(document).ready(function () {...})
</script>

四、示例（轮播图）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>轮播图</title><!-- 引入swiper3.0 css文件 --><link rel="stylesheet" href="swiper/css/swiper.min.css"><style>*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}ul{list-style: none;}a{text-decoration: none;}.container {position: relative;width: 750px;margin: 0 auto;}       </style>
</head>
<body><!-- 版心 --><div class="container"><!-- 轮播图 --><div class="swiper-container"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="data:images/banner01.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="data:images/banner02.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="data:images/banner03.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="data:images/banner04.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="data:images/banner05.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="data:images/banner06.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="data:images/banner07.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="data:images/banner08.jpg" alt=""></a></li></ul><!-- 分页器 --><div class="swiper-pagination"></div></div></div><!-- 引入swiper3.0插件脚本 --><script src="swiper/js/swiper.min.js"></script><!-- js初始化脚本 --><script>window.onload=function(){/* 轮播图 */new Swiper('.swiper-container',{autoplay:1000,loop:true,pagination:'.swiper-pagination',autoplayDisableOnInteraction:false               });}</script>
</body>
</html>

转载于:https://www.cnblogs.com/EricZLin/p/9359415.html

swiper轮播图插件相关推荐

react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
Swiper 轮播图插件实现
https://github.com/nolimits4web/swiper 1. 引入 <link rel="stylesheet" th:href="@{/ma ...
Swiper轮播图插件之如何修改前进后退按钮swiper-button-prev和swiper-button-next的默认样式
第一步: 在轮播图最外层的容器中将原本前进后退按钮的大小设置为0 注意: Swiper6之前的默认容器是'.swiper-container',Swiper7之后的默认容器是'.swiper'. .s ...
swiper轮播图插件的使用步骤
一.参考文档 1.官网:https://swiper.com.cn/ 2.案例展示:https://swiper.com.cn/demo/index.html 3.获取swiper文件:https:/ ...
关于修改swiper轮播图插件中的小圆点变成背景图
当我们使用swiper插件时,底部的小点点需要修改成图片样式的形状,下面分享一下如何修改:  <div class="swip ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
轮播图插件--swiper
轮播图插件swiper下载方式输入网址:https://www.swiper.com.cn/ 进入官网,点击 "获取Swiper" >点击 "下载Swiper&q ...
轮播图插件（swiper）
今天给新手介绍一个轮播图插件--swiper 首先要引用swiper.min.css和swiper.min.js. 页面代码 <div class="swiper-container& ...