目录
swiper官网
准备文件
1.打开官网
2.下载swiper文件
找到导航栏 => 获取Swiper => 下载Swiper
步骤如下图
(1)
(2)
下载后
打开文件
(1)下载好的文件打开找到demos文件里面有html原生案例
(2)下载好的文件打开找到package文件里面有对应的css和js文件
跳转指定位置，根据点击索引
var index = "{$index}"; // index为指定将要切换到的slide的索引
swiper.slideTo(index, 100, false);
原生html用法如下
下面html直接可以用~
1.源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<!-- 引入本地样式文件 -->
<!-- <link rel="stylesheet" href="../package/swiper-bundle.min.css" /> -->
<!-- 引入线上的样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<!-- Demo styles -->
<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: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<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 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-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<!-- 引入本地js文件 -->
<!-- <script src="../package/swiper-bundle.min.js"></script> -->
<!-- 引入线上js文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.2/swiper-bundle.min.js"
integrity="sha512-EWat0/wkEZtE7OENhG700T+jmrpHStGS7CqHUAzKW5MzNnVEa9Wfb+zJjF4hoXSgMTWlixL5Fgqhjx5PAliaXw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
cssMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
mousewheel: true,
keyboard: true,
});
</script>
</body>
</html>
2.效果如下图
Vue项目用法如下
1.安装依赖
推荐使用swiper5版本
npm install swiper@5
如果想
禁止手动鼠标滑动轮播图的话,在最外层div的class名swiper-container后面加swiper-no-swiping即可生效,可以通过点击按钮的轮播图进行切换页面
2.案例1
<template>
<div class="home">
<!-- 一：请求数据的情况下看序号 -->
<!-- 二:无数据就是现在这种情况下,打开页面看得就是无数据的页面 -->
<!-- <div v-if='banner.length' class="swiper-container"> -->
<!-- 1. -->
<!-- <div v-if='banner.length' class="swiper-container swiper-no-swiping"> 这样就可以禁止鼠标滑动轮播图了!!! -->
<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>
<!--2.只用下面这一个就行循环出来 -->
<!-- <div v-for="item in banner" :key="item.id" class="swiper-slide">
<img :src="item.image" alt="">
</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>
</div>
</template>
<script>
// 下面这两个是直接npm i swiper@5安装好的依赖里面文件取得,也就是项目目下的node_modules这里面找到swiper下面的swiper.min.css这个文件就是了,swiper这个就是下载好的依赖直接用的
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
// import axios from 'axios'
export default {
data () {
return {
// banner: [] // 3.请求的接口数据数组
}
},
// async created () { // 4.请求数据生命周期
// const res = await axios.get('http://localhost:3008/banner')
// this.banner = res.data
// },
mounted () {
// updated () { // 5.如果后台取数据的话就用这个生命周期,用这个mounted生命周期轮播图功能失效,只能这个updated生命周期函数
setTimeout(() => {
new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
}, 10)
},
name: 'Home',
components: {
}
}
</script>
<style lang="less">
.swiper-container {
width: 600px;
height: 300px;
}
</style>
效果如下图
2.案例2
<template>
<div class="home">
<!-- 一：请求数据的情况下看序号 -->
<!-- 二:无数据就是现在这种情况下,打开页面看得就是无数据的页面 -->
<!-- <div v-if='banner.length' class="swiper-container"> -->
<!-- 1. -->
<div class="swiper-container swiper-no-swiping">
<div class="swiper-wrapper">
<div class="swiper-slide">
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</div>
<div class="swiper-slide">
按搜索所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所
</div>
<div class="swiper-slide">
安安定定多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多
</div>
<div class="swiper-slide">
收到货后哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或发发发发发发发发发发发发发发发发反反复复发发发发发发发发发发发发发发发发发发
</div>
<div class="swiper-slide">
咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩
</div>
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper_lft">
<div class="swiper-button-prev"></div>
</div>
<div class="swiper_rgt">
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
// 下面这两个是直接npm i swiper@5安装好的依赖里面文件取得,也就是项目目下的node_modules这里面找到swiper下面的swiper.min.css这个文件就是了,swiper这个就是下载好的依赖直接用的
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
// import axios from 'axios'
export default {
data () {
return {
// banner: [] // 3.请求的接口数据数组
}
},
// async created () { // 4.请求数据生命周期
// const res = await axios.get('http://localhost:3008/banner')
// this.banner = res.data
// },
mounted () {
// updated () { // 5.如果后台取数据的话就用这个生命周期,用这个mounted生命周期轮播图功能失效,只能这个updated生命周期函数
setTimeout(() => {
new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
}, 10)
},
name: 'Home',
components: {
}
}
</script>
<style lang="less">
.home {
}
.swiper-container {
width: 100%;
// height: 100%;
height: 300px;
background: #ccc;
}
.swiper-button-next,
.swiper-button-prev {
width: 50px;
height: 50px;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content: '';
width: 40px !important;
height: 40px !important;
z-index: 999;
background: rgba(11, 10, 10, 0.5);
background-image: url('../assets/images/left.png') !important;
background-size: 40% 40%;
background-position: 12px 11px;
background-repeat: no-repeat;
border-radius: 5px;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content: '';
width: 40px !important;
height: 40px !important;
z-index: 999;
background: rgba(11, 10, 10, 0.5);
background-image: url('../assets/images/right.png') !important;
background-size: 40% 40%;
background-position: 12px 11px;
background-repeat: no-repeat;
border-radius: 5px;
}
</style>
效果如下图
3.案例3
随机点击轮播中一个，就会转动到中间位置
<template>
<div class="home">
<!-- Swiper -->
<div class="four_media_swiper">
<!-- Swiper -->
<div class="swiper" id="mySwiperEsercixe">
<div class="swiper-wrapper">
<!-- 第一个 -->
<div class="swiper-slide swiper-slide1">
<div class="swiper-slide">
<div class="four_count">
<div class="four_list">
<div class="four_list_top">
<div class="four_list_img">
</div>
<div class="four_list_ctr">
CrossPlatform
</div>
<div class="four_list_btn">
ElitEsse
</div>
</div>
<div class="four_list_bottom">
<img src="" alt="暂无图">
</div>
</div>
</div>
</div>
</div>
<!-- 第二个 -->
<div class="swiper-slide swiper-slide1">
<div class="swiper-slide">
<div class="four_count">
<div class="four_list">
<div class="four_list_top">
<div class="four_list_img">
</div>
<div class="four_list_ctr">
CloudServer
</div>
<div class="four_list_btn">
ElitEsse
</div>
</div>
<div class="four_list_bottom">
<img src="" alt="暂无图">
</div>
</div>
</div>
</div>
</div>
<!-- 第三个 -->
<div class="swiper-slide swiper-slide1">
<div class="swiper-slide">
<div class="four_count">
<div class="four_list">
<div class="four_list_top">
<div class="four_list_img">
</div>
<div class="four_list_ctr">
PureJavascript
</div>
<div class="four_list_btn">
ElitEsse
</div>
</div>
<div class="four_list_bottom">
<img src="" alt="暂无图">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="swiper-pagination mySwiperFourmain-pagination" id="mySwiperFourmain-pagination">啊啊啊啊啊啊啊</div> -->
<div id="mySwiperFourmain-pagination"></div>
</div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import $ from 'jquery'
export default {
name: 'carrousel',
data () {
return {
}
},
mounted () {
this.getInfor();
},
methods: {
getInfor () {
this.$nextTick(() => {
const swiper = new Swiper("#mySwiperEsercixe", {
slidesPerView: 2.1,
spaceBetween: 10,
centeredSlides: true,
grabCursor: true,
//无限循环
loop: true,
pagination: {
el: "#mySwiperFourmain-pagination",
clickable: true,
},
});
swiper.on('click', function (touchend) {
// 第一步 获取索引值 var index = "{$index}"; index为指定将要切换到的slide的索引 ，获取div列表的索引值，这个获取所有的同名class类；若是循环数据用index就行
var divs = $('.swiper-slide1');
for (var i = 0, lens = divs.length; i < lens; i++) {
divs[i].index = i;
$(divs[i]).click(function () {
swiper.slideTo(this.index, 1000, false);// 第二步 根据索引跳转方法 切换到第一个slide，速度为1秒 mySwiper.slideTo(index, speed, runCallbacks) // 文档地址 https://3.swiper.com.cn/api/function/2014/1218/109.html
});
};
});
})
},//11
}
}
</script>
<style lang='less' scoped>
.home {
width: 800px;
height: 400px;
background: #ffbd74;
overflow: hidden;
.four_media_swiper {
// border: 1px solid lightseagreen;
width: 750px;
height: 301px;
margin-top: 70px;
padding-bottom: 50px;
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
// background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
// 未激活缩小样式
transition: 300ms;
transform: scale(0.9);
.four_list {
width: 326px;
height: 301px;
border-radius: 12px;
background: #ffffff;
/* border: 1px solid #000000; */
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0px 16px 80px 0px rgba(51, 51, 51, 0.12);
transition: all 0.5s;
.four_list_img {
width: 69.19px;
height: 64px;
background: #ffbd74;
border-radius: 50px;
background: rgba(255, 189, 116, 0.05);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
width: 25.95px;
height: 16px;
// background: #e2598b;
}
}
.four_list_ctr {
margin-top: 24px;
font-family: MicrosoftYaHeiLight;
font-size: 30px;
line-height: 30px;
letter-spacing: 0px;
/* Dark */
color: #292830;
}
.four_list_btn {
font-family: MicrosoftYaHeiLight;
font-size: 14px;
line-height: 30px;
letter-spacing: 0px;
color: #bdbdbd;
margin-top: 12px;
}
.four_list_bottom {
// width: 17.3px;
// height: 8px;
margin-top: 215px;
margin-right: 355px;
cursor: pointer;
position: absolute;
overflow: hidden;
}
.img_arrow {
margin-left: -18px;
}
}
// .four_count:hover .four_list {
// transform: translate(0px, -20px);
// }
// .four_count:hover .img_arrow {
// width: 17.3px;
// height: 8px;
// margin-left: 18px;
// }
// .four_count:hover .four_list_bottom {
// transition: all 0.2s linear;
// transform: translateX(172px);
// }
// .four_list_top {
// text-align: center;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// }
// .four_count:hover .four_list_top {
// transform: translate(0px, -10px);
// transition: transform 0.1s ease 0.1s;
// }
// .four_count:hover {
// transform: translateY(-2px);
// }
.four_count {
}
.four_count:hover .four_list {
transform: translate(0px, -20px);
}
.four_count:hover .img_arrow {
width: 17.3px;
height: 8px;
margin-left: 18px;
}
.four_count .four_list_bottom {
// 新加
transition: all 0.2s linear;
}
.four_count:hover .four_list_bottom {
transition: all 0.2s linear;
transform: translateX(172px);
}
.four_list_top {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.four_count .four_list_top {
transition: transform 0.1s ease 0.1s;
}
.four_count:hover .four_list_top {
transform: translate(0px, -10px);
transition: transform 0.1s ease 0.1s;
}
.four_count:hover {
transform: translateY(-2px);
}
}
// 激活后还原样式
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1.1);
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#mySwiperFourmain-pagination {
position: relative;
left: 330px;
top: 20px;
// margin: 0 auto;
/deep/ .swiper-pagination-bullet-active {
background: #000000 !important;
width: 32px;
height: 2px;
border-radius: 0 !important;
}
/deep/ .swiper-pagination-bullet {
width: 20px;
height: 2px;
background: rgba(0, 0, 0, 0.5);
border-radius: 0 !important;
}
}
}
}
</style>
如下图
swiper常见问题
问题1
刷新页面swiper失效问题
解决方法:配置容器外面设置一个定时器
setTimeout(() => { }, 10)
例如
mounted () {
setTimeout(() => {
new Swiper('#Sixmain1', {
loop: true, // 循环模式选项
grabCursor: true,// 手指开关
clickable: true,
// 如果需要分页器
pagination: {
el: '#Sixmain1_swiper_pagination',
},
})
}, 10)
}
问题2
单个组件同时挂载多个swiper
解决方法:绑定容器,换成id绑定
例如
<template>
<div class="home">
<div class="box">
<div class="four_media_swiper">
<!-- 绑定如期换成id !!! -->
<div class="swiper-container" id="container-Fourmain">
<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>
</div>
<div class="four_media_swiper">
<!-- 绑定如期换成id !!!-->
<div class="swiper-container" id="container-threemain">
<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>
</div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
export default {
mounted () {
setTimeout(() => {
new Swiper('#container-threemain', { //绑定如期换成id!!!
slidesPerView: 2,
spaceBetween: 30,
centeredSlides: true,
loop: true,
watchSlidesVisibility: true,
pagination: {
el: '#pagination-Fourmain',
clickable: true,
},
});
}, 10)
setTimeout(() => {
new Swiper('#container-Fourmain', { //绑定如期换成id!!!
slidesPerView: 2,
spaceBetween: 30,
centeredSlides: true,
loop: true,
watchSlidesVisibility: true,
pagination: {
el: '#pagination-Fourmain',
clickable: true,
},
});
}, 10)
},
}
</script>
<style scoped>
.box {
width: 755px;
height: 301px;
border: 1px solid red;
background: #ccc;
margin: 0 auto;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
height: 290px !important;
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1);
}
/* 第一个 */
.underline {
width: 200px;
height: 50px;
background: red;
margin: 20px;
position: relative;
}
.underline:after {
content: '';
width: 0;
height: 5px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all 0.8s;
}
.underline:hover:after {
left: 0%;
width: 100%;
}
/* 第二个 */
#box {
margin-top: 50px;
}
#box ul {
/* background: #d62f2f; */
text-align: center;
box-shadow: 0 0 19px 0px #a0a0a0;
}
#box ul li {
position: relative;
padding: 20px;
display: inline-block;
cursor: pointer;
color: rgb(24, 23, 23);
}
#box ul li:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 2px;
background: #3c2d2d;
}
#box ul li:hover:after {
left: 0;
transition: all 1s;
width: 100%;
}
</style>
swiper常用属性和方法推荐博主
其他轮播如插件
concise-slider
concise-slider是一个轻量级的vue轮播图插件，使用concise-slider只需要进行简单的配置，即可实现一个支持自适应、按钮、分页的轮播图，且同时兼容移动端和PC端。
vue-seamless-scroll
vue-awesome-swiper
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
