swiper 在网页中常用的方法

1、使用时在页面引入

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

2、基本结构

 <div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: ,//可选选项,自动滑动
})
</script>

基本方法

loop: false,  //是否循环
autoplay: 0, //是否自动播放
slidesPerView : 4, //可视区域显示几个
spaceBetween : 10, //可是区域显示的超过一张时,设置之间的距离
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onlyExternal: true,
direction: 'vertical', // 控制上下滚动还是左右滚动

显示都点

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

pagination : '.swiper-pagination',
//都点的样式可查选官方文档

显示左右切换按钮

 <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 修改箭头颜色示范 -->
<div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
<div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->
<style>
/*其他颜色需更改css样式 007aff */
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
</style>

swiper滑动东特定某一页

mySwiper.slideTo(2, 1000, false);

第一个参数,滑动到特定页码的下标,第二个参数,滑动时间,第三个参数滑动到下表指定页码之后是否触发回调。

3d swiper 地址,包括移动端自适应。

前端swiper使用指南的更多相关文章

  1. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  2. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  3. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  4. [推荐]移动H5前端性能优化指南

    [推荐]移动H5前端性能优化指南 http://isux.tencent.com/h5-performance.html

  5. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  6. 绝版珍珍藏:web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  7. 移动H5前端性能优化指南[转]

    移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...

  8. 移动 H5(PC Web)前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

  9. [转]移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

随机推荐

  1. Redis学习笔记(一)-持久化

    一.RDB持久方式 RDB持久化是把当前进程的数据已快照的形式保存到硬盘的过程. 触发方式: 1.手动触发命令:save和bgsave save:阻塞式,内存较大的实例在执行过程中会造成长时间的阻塞, ...

  2. php 后端实现JWT认证方法

    JWT是什么 JWT是json web token缩写.它将用户信息加密到token里,服务器不保存任何用户信息.服务器通过使用保存的密钥验证token的正确性,只要正确即通过验证.基于token的身 ...

  3. 继续聊WPF——Expander控件(1)

    这个控件最实用的地方,就是做导航栏. <StackPanel Margin="20,20" Width="100" Height="460&qu ...

  4. 【codeforces 798C】Mike and gcd problem

    [题目链接]:http://codeforces.com/contest/798/problem/C [题意] 给你n个数字; 要求你进行若干次操作; 每次操作对第i和第i+1个位置的数字进行; 将 ...

  5. (10)Spring Boot修改端口号【从零开始学Spring Boot】

    Spring boot 默认端口是8080,如果想要进行更改的话,只需要修改applicatoin.properties文件,在配置文件中加入: server.port=9090 常用配置: #### ...

  6. 线上MySQL慢查询现象案例--Impossible WHERE noticed after reading const tables

    前言:2012年的笔记整理而得,发布个人博客,做备忘录使用. 背景:线上慢查询日志监控,得到如下的语句:       发现:select doc_text from t_wiki_doc_text w ...

  7. SQL SERVER高级知识积累

    什么叫做高可用服务器? 高可用服务器简单来理解就是不宕机的服务器 什么叫走服务器的自动化灾备? 自动灾备的意思就是,让从服务器自动变成主服务器 sql server的聚合是什么? 事务会引起性能下降, ...

  8. 手动搭建HTTP下载站点

    手动搭建HTTP下载站点 index.jsp <%--Listfile.jsp--%> <%@ page import="java.io.File,java.text.Si ...

  9. sikuli_ide打开提示没有对应的javaw

    对于sikuli,需要安装32位的jdk且不能高于1.7的版本 对于64位系统的C盘,Program Files文件夹是64位的,Program File(x86)文件夹是32位的 需要安装一个32位 ...

  10. CodeForces 651C

    Description Watchmen are in a danger and Doctor Manhattan together with his friend Daniel Dreiberg s ...