移动端 Swiper
一、基本使用
Swiper.js 比较成熟,
是国人开发的一款非常方便的第三方库,可以提升我们开发效率,支持各种姿势的轮播,很多大厂也是在移动端网页中使用它
使用方法
https://swiper.com.cn/usage/index.html
下载后部分解压文件
core 文件夹是核心代码
vue 中的使用
demo 示例
...
demo 文件夹
default
navigation 有两边左右的按钮箭头
pagination 有下面的小圆点按钮
autoplay 自动播放
effect-cube 立方块翻面
effect-cards 翻扑克牌
infinite-loop 无限轮播
...
最基础的配置
1. 从Swiper7开始,最外层容器默认类名由 .swiper-container 变更为 .swiper
2. 引入 css 和 js 文件两个文件
3. 初始化 new Swiper() ,参数 .mySwiper 是最外层容器,参数 {} 对象里面配置
4. default 默认横向水平整屏滚动,但不能无缝滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title>swiper</title> <link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css"> <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 { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } </style> </head> <body> <div class="swiper mySwiper"> <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> <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script> <script> var swiper = new Swiper(".mySwiper", {}); </script> </body> </html>
常用配置
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background:tomato;">Slide 1</div> <div class="swiper-slide" style="background:#CA4040;">Slide 2</div> <div class="swiper-slide" style="background:#FF8604;">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> <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <script> var mySwiper = new Swiper ('.swiper', { direction: 'vertical', // 垂直切换选项,注销该配置默认水平 loop: true, // 循环模式选项,设置为true是无限 spaceBetween: 30, // 滚动之间的间隔 centeredSlides: false, // 什么什么会居中??? preventClicksPropagation : false, // 拖动时阻止冒泡 autoplay: { // 自动滑动 delay: 2500, disableOnInteraction: false, }, pagination: { // 如果需要分页器(小圆点) el: '.swiper-pagination', }, navigation: { // 如果需要前进后退按钮 nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { // 如果需要滚动条 el: '.swiper-scrollbar', hide: true, }, mousewheel: true, // 鼠标滚动,默认为false不滚动(需要配合上面的loop循环) keyboard : true, // 键盘 }); </script>
默认是全屏滚动,我们修改一下实现上节课横向滚动轮播
1. 注释一些我们不要的样式
2. .swiper 设置我们自己的需要的尺寸
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title>横向无缝滚动</title> <link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css"> <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 { /* 更改成自己需要的宽高 width: 100%; height: 100%; */ width: 100vw; height: 200px; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; width: 100vw; /*图片也修改成自己的需要的尺寸*/ height: 200px; object-fit: cover; } </style> </head> <body> <div class="swiper mySwiper"> <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> <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script> <script> var swiper = new Swiper(".mySwiper", { loop: true, // 循环模式true是无限 pagination: { // 小圆点分页器 el: '.swiper-pagination', clickable :true, // 点击小圆点时候自动切换 }, }); </script> </body> </html>
二、自己探索
150.freemode.html
横向滑屏,适合做移动端导航滑动的菜单
freeMode 意思是自由模式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title>freemode横向滑屏</title> <link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css"> <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 { width: 100%; height: 200px; } /* 自己加的样式 */ .swiper .swiper-slide{ text-align: center; font-size: 18px; background: lightcoral; height: 200px; line-height: 200px; } </style> </head> <body> <!-- 要外层必须是swiper,mySwiper区分多个滚动 --> <div class="swiper mySwiper"> <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 class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-pagination"></div> </div> <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script> <script> var mySwiper = new Swiper ('.mySwiper', { slidesPerView: 4, // 每页(视口)显示几张图片,默认为3 spaceBetween: 10, // 轮播图之间的的间隔 freeMode: true, // 自由模式默认为true,意思是图片可以在屏幕边缘滑动一半,设置为false是自动吸附的效果 pagination: { // 小圆点 el: ".swiper-pagination", clickable: true, }, }); </script> </body> </html>
160.scroll-cnmtainer.html
竖向滑屏(垂直滚动)
滑屏使用这个 freeMode: true 自由模式效果好,只使用一个 swiper-slide
注意三个必须的样式,否则滑不动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title>scroll-cnmtainer 垂直滚动</title> <link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css"> <style> /* swiper默认的样式 */ html, body { /* position: relative; */ height: 100%; /* 必须的样式,整屏竖向滑动,html和body的高度必须设置100% */ } .swiper { width: 100%; height: 100%;/* 必须的样式 */ } .swiper-slide { font-size: 18px; height: auto; /* 必须的样式,整屏竖向滑动,这个元素的高度必须设置为auto,让内容撑起容器的高度 */ box-sizing: border-box; } /* 自己的样式 */ body{ margin: 0; } #header,#footer{ height: 50px; width: 100%; background-color: #eee; position: fixed; z-index: 100; line-height: 50px;text-align: center;color: #fff; } #header{ top: 0; border-bottom: 1px solid #ddd; } #footer{ bottom: 0; border-top: 1px solid #ddd; } p{ margin:0;padding:0; height:500px;line-height:500px; color:#fff; text-align:center; font-size: 100px; } </style> </head> <body> <div id="header">header</div> <section class="swiper mySwiper" > <div class="swiper-wrapper"> <div class="swiper-slide" style="padding-top:60px;padding-bottom: 60px;"><!-- 在swiper-slide元素上设置上下的margin --> <p style="background:tomato;">1</p> <p style="background:deepskyblue;">2</p> <p style="background:orange;">3</p> <p style="background:deeppink;">4</p> </div> </div> <div class="swiper-scrollbar"></div> </section> <div id="footer">footer</div> <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script> <script> var swiper = new Swiper(".mySwiper", { direction: "vertical", // 垂直 slidesPerView: "auto", // freeMode: true, // 自由模式(顺着滑屏必须要这个好,以swiper-slide为滑动单位) scrollbar: { // 侧边滚动条 el: ".swiper-scrollbar", }, mousewheel: true, // 默认值为true,表示允许鼠标滚动 }); </script> </body> </html>
页面有横、竖两个滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title>横竖组合</title> <link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css"> <style> /* swiper默认的样式 */ html, body { /* position: relative; */ height: 100%; /* 整屏滑动必须的样式*/ } .swiper { width: 100%; height: 100%; } .swiper-slide { height: auto; /* 整屏竖向滑动必须的样式*/ } /* 自己的样式 */ body{ margin: 0; background: #f5f5f5; color: #fff; } #header{ height: 50px; width: 100%; background-color: #e64a48; position: fixed; top: 0; z-index: 100; box-shadow: 0 3px 6px rgba(120, 120, 120, .5); } #footer{ height: 50px; width: 100%; background-color: #fff; border-top:1px solid #e7e9e1; position: fixed; bottom: 0; z-index: 100; box-shadow: 0 -3px 6px rgba(150, 150, 150, .5); } .common{ height: 250px; margin-bottom: 10px; } .slideContainer{ margin-top: 60px; margin-bottom: 60px; } </style> </head> <body> <div id="header">header</div> <section class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide slideContainer"> <!-- 横向滑屏 --> <div class="swiper common horizontal_1"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202201/164242168139798.jpg) no-repeat center/cover;">Slide 1</div> <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202311/169936708299182.jpg) no-repeat center/cover;">Slide 2</div> <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202212/166989798079799.jpg) no-repeat center/cover;">Slide 3</div> </div> </div> <!-- 内容 --> <div style="height:600px; margin-bottom:10px; background:url(http://ruyic.com/blog/uploads/image/202304/168195371837071.jpg) no-repeat center/cover;"></div> <!-- 横向滑屏 --> <div class="swiper common horizontal_2"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background:tomato;">Slide 1</div> <div class="swiper-slide" style="background:#CA4040;">Slide 2</div> <div class="swiper-slide" style="background:#FF8604;">Slide 3</div> </div> <div class="swiper-pagination"></div> </div> <!-- 内容 --> <div style="height:400px;background:url(http://ruyic.com/blog/uploads/image/202212/167128700952936.gif) no-repeat center/cover;"></div> </div> </div> </section> <div id="footer">footer</div> <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script> <script> // 初始化滑动 function initSlide() { new Swiper('.mySwiper', { direction: "vertical", slidesPerView: "auto", freeMode: true, momentumRatio: 2, momentumVelocityRatio: 5 }); new Swiper('.horizontal_1', { slidesPerView: "auto", freeMode: true, pagination: { // 小圆点 el: ".swiper-pagination", clickable: true, }, momentumRatio: 2, momentumVelocityRatio: 5 }); new Swiper('.horizontal_2', { slidesPerView: "auto", freeMode: false, pagination: { // 小圆点 el: ".swiper-pagination", clickable: true, }, momentumRatio: 2, momentumVelocityRatio: 5 }); } initSlide(); </script> </body> </html>
解决Swiper不能滑动的问题
var mySwiper = new Swiper('.swiper-container',{ pagination : '.swiper-pagination', paginationClickable: true, longSwipesRatio: 0.3, touchRatio:1, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper });
转自:https://www.qyyshop.com/info/303613.html