pc端html轮播带滑块,swiper.js简单快速实现轮播滑动(兼容PC端、移动端)
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/)
效果演示:
PC端
移动端(在浏览器将设备切换为手机,这里切换为iphone),swiper支持移动端触控左右滑动
代码部分(复制粘贴可直接使用):
1 html>
2
3
4
Swiper.js简单快速实现轮播滑动(兼容PC端、移动端)
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 var mySwiper = new Swiper('.swiper-container', {//初始化Swiper
28 autoplay: {//自动切换
29 delay: 3000,
30 stopOnLastSlide: false,
31 disableOnInteraction: false,
32 },
33 navigation: {//前进后退
34 nextEl: '.swiper-button-next',
35 prevEl: '.swiper-button-prev',
36 },
37 pagination: {//分页器
38 el: '.swiper-pagination',
39 clickable :true,
40 },
41 loop : true,//循环
42 })
43
使用方法:
1.首先需要在head头部加载插件,需要用到的文件有swiper.css和swiper.js文件。可下载swiper文件或使用CDN远程加载
2.HTML内容
上面的HTML内容是固定模板,如果需要添加左右箭头或者分页器等其他组件可以参考swiper4的官方文档:https://www.swiper.com.cn/api...
3.初始化Swiper
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,//等同于以下设置
/*autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},*/
});
在js中如果需要添加其他配置选项可以参考swiper4的官方文档:
https://www.swiper.com.cn/api...
结语:
在实际的web开发中,总是需要兼容PC跟移动端,如果使用原生js自己写的话,不仅耗时,可能兼容性、稳定性也不好,特别是移动端的touch触控事件。使用swiper便不用考虑到兼容这些事,只要熟悉它的API,便可快速实现手机,电脑网页大部分滑动,焦点图、tab、触摸导航等功能
最后
觉得文章不错的,给我点个赞哇,关注一下呗!
技术交流可关注微信公众号【GitWeb】,加我好友一起探讨
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[swiper.js简单快速实现轮播滑动(兼容PC端、移动端)]http://www.zyiz.net/tech/detail-105473.html
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动(兼容PC端、移动端)相关推荐
- pc端html轮播带滑块,原生js实现移动端+pc端 轮播插件
slide.js 原生js写的轮播兼容 pc+移动端 插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动. 使用说明:slide.js文件包含小部分es6语法编写的文 ...
- html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- html js简单实现图片轮播功能
本章记录简单的图片轮播功能,需要html.js和css共同实现1.html文件 <!DOCTYPE html> <html><head><meta chars ...
- 短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
- 自动图片轮播php源码,js实现自动图片轮播代码
本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下 #div1{ width: 192px; height: 120px; border: 1px solid gray; ...
- html+css+js简单实现图片轮播效果
<html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ ...
- JS完成轮播图(全部JS代码,自动轮播)
需求: 1.点击左右方向图标切换图片 2.点击图片中的小圆点切换对应图片 3.切换图片改变对应小圆点的颜色 4.鼠标离开时自动轮播,鼠标滑入停止轮播 5.不能有空白 思路: 1.先布局,创建轮播图显示 ...
- next.js+react+typescript+antd+antd-mobile+axios+redux+sass react服务端渲染构建项目,从构建到发布,兼容pc+移动端
简介:该教程兼容pc+移动端,如只需一端,可忽略兼容部分教程,根据需要运行的客户端构建项目 antd官网:https://ant.design/components/overview-cn/ antd ...
- 2022-10-31 网工进阶(三十三) IP组播-流量模型、组播概念、组播报文结构、组播地址与MAC、组播网络架构、组播服务模型、组播数据转发原理(RPF检查、组播分发树、组播协议介绍)
IP组播概念 流量模型 网络中存在各种各样的业务,从流量模型看一般可以将业务分为两类: 点到点业务:比如FTP,WEB业务,此类业务主要特点是不同的用户有不同的需求,比如用户A需要下载资料A,用户B需 ...
最新文章
- 使用Javaweb实现在线调查问卷系统
- Win64 驱动内核编程-18.SSDT
- nvidia nvlink互联与nvswitch介绍
- 猎豹移动(金山网络)2015校园招聘(c++project师)
- 计算机网络工程本科培养计划,网络工程专业卓越计划本科培养方案2015版-西安电子科技大学计算机.doc...
- EasyUI学习总结(一)——EasyUI入门
- python把数字逐一存入列表_python实现将range()函数生成的数字存储在一个列表中...
- (转载)c/c++笔试面试题(2)
- Linux学习教程,Linux入门教程(超详细)| 网址推荐
- abrels.inc.php_abrels.inc.php
- 【问题9】Redis热点Key发现及常见解决方案
- SYN FLOOD攻击防范
- mysql数据库order by_[数据库]mysql 使用order by
- 大明 VS 满清,明朝的十次机会
- Mac快速还原最小化窗口
- 买二手房不用愁,Python爬虫一键爬取海量二手房源,分分钟找到心仪房子!【附源码】
- 合肥工业大学2021离散数学上机实验一
- POJ - 3179 Corral the Cows【离散化】【前缀和】
- 电脑(Windows)常用快捷键
- springcloud -netflix-Ribbon 负载均衡的实现
热门文章
- maven引入springframework的猫腻
- STL内嵌数据类型: value_type
- windows下手动配置ipv6地址
- Asterisk学习进阶-3
- Arm Linux交叉编译和连接过程分析(1)
- windows mobile 编译(生成镜像)提速
- url采集器_Linux「第三节」-centos7.5部署数据采集器Telegraf
- 月头月尾oracle取数,Oracle分析函数Over()的使用
- 【转】ABP源码分析四十三:ZERO的本地化
- 【转】WPF PRISM开发入门一( 初始化PRISM WPF程序)