移动端 轮播图库Swiper
一、基本使用
Swiper.js 比较成熟，是国人开发的一股非常方便的第三方库，可以提升我们开发效率，支持各种姿势的轮播，很多大厂也是在移动端网页中使用它
使用方法 https://swiper.com.cn/usage/index.html
cdn https://swiper.com.cn/cdn/index.html
下载 https://www.swiper.com.cn/download/index.html
下载解压后
core 文件夹是核心代码
vue 中的使用
demo 示例文件夹
demo示例文件夹
default
navigation 有两边左右箭头按钮
pagination 有下面的小按钮
autoplay 自动播放
effect-cube 立方块效果
effect-cards 翻扑克牌效果
infinite-loop 无限轮播
default 默认横向水平整屏滚动，但不能无缝滚动
1. 从Swiper7开始，最外层容器默认类名由 .swiper-container 变更为 .swiper
2. 引入 css 和 js文件
3. 初始化 new Swiper() ，参数 .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>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, // 循环模式选项
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,
},
// 鼠标滚动，默认为false不滚动（配合上面的 loop 循环）
mousewheel: true,
// 键盘
keyboard : true,
});
</script>实现上节课横向滚动的轮播图
<!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: 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 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, // 循环模式选项
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: #fff;
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, // 间隔默认为30
freeMode: true, // 自由模式，默认为true。true意思是图片可以在屏幕边缘滑动一半，false自动吸附的效果
pagination: { // index索引小圆点
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%;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
font-size: 18px;
height: auto;
box-sizing: border-box;
}
/* 自己的样式 */
body{
margin: 0;
}
#header{
height: 50px;
width: 100%;
background-color: #ddd;
position: fixed;
top: 0;
z-index: 100;
}
#footer{
height: 50px;
width: 100%;
background-color: #ddd;
position: fixed;
bottom: 0;
z-index: 100;
}
p{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="header">header</div>
<section class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="padding:60px 0;"><!-- 在swiper-slide元素上设置上下的margin -->
<p style="background:tomato;height: 500px;"></p>
<p style="background:deepskyblue;height: 500px;"></p>
<p style="background:orange;height: 500px;"></p>
<p style="background:deeppink;height: 500px;"></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);
}
.horizontal{
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="horizontal">
<div class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202212/167034331268543.jpg) no-repeat center/cover;">Slide 1</div>
<div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202212/167034291138784.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>
<!-- 内容 -->
<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="horizontal">
<div class="swiper mySwiper2">
<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>
<!-- 内容 -->
<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('.mySwiper2', {
slidesPerView: "auto",
freeMode: 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
Leave a comment
0 Comments.