先上個效果圖，代碼可以直接拿~
安裝swiper和vue-awesome-swiper
因為項目用的是nuxt2，所以考慮到swiper的兼容問題，選擇的是"swiper": “^5.2.0”
首先是安裝swiper和vue-awesome-swiper，并指定版本
npm install swiper@5.2.0 --save
npm install vue-awesome-swiper@4.1.1 --save
然后引入，在nuxt.config.js中引入
css: [
'swiper/css/swiper.css'
],
plugins: [
{ src: '@/plugins/vue-swiper', ssr: false }
],
基本用法
在plugins下新建一個vue-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在components下新建一個VueSwiper.vue
<template>
<div v-if="initStatus" v-swiper:mySwiper="swiperOption" class="swiper mySwiper swiperBox">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in list.value" :key="index">
<div class="pr">
<div class="swiper-slide-imgbox uf uf-ac uf-jc">
<img :src="item.imageUrl" />
</div>
<div class="font12 c8 txt-box">{{ item.title }}</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
export default {
props: {
list: {//banner數(shù)組
type: Object,
default: function () {
return {}
}
},
slidesPerView: {//一頁顯示幾個
type: Number,
default: 1
}
},
data() {
return {
initStatus: false,//初始化狀態(tài)
swiperOption: {},//swiper參數(shù)
}
},
mounted() {
let self = this;
this.$nextTick(() => {
this.swiperOption = {
loop: true,
loopAdditionalSlides: 3,
coverflowEffect: {
rotate: 60, //側(cè)轉(zhuǎn)角度（正值凹陷）
stretch: -80,//每個slide之間拉伸值（正值緊貼）
depth: 100, //值越大為遠景（可負值）
modifier: 1, //depth和rotate和stretch的倍率
shadows: false
},
centeredSlides: true,
initialSlide: 1,
slidesPerView: self.slidesPerView,//一頁顯示幾個
spaceBetween: 10,//間隔
updateOnWindowResize: true,
watchSlidesProgress: true,//
noSwiping: true,//
effect: 'coverflow', //設(shè)置Slide的切換效果，默認為"slide"（普通位移切換），還可設(shè)置為"fade"（淡入）、"cube"（方塊）、"coverflow"（3d流）、"flip"（3d翻轉(zhuǎn)）、"cards"(卡片式)、"creative"（創(chuàng)意性）。
freeMode: 1,
autoplay: {//自動輪播//
delay: 3000, //
disableOnInteraction: false,//操作swiper后 自動輪播不會停止//
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
}
this.initStatus = true //渲染swiper
})
},
}
</script>
<style lang="scss" scoped>
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
}
.swiper-wraper {
width: 100%;
height: 100%;
z-index: 1;
display: flex;
box-sizing: content-box;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
}
.swiper-slide-imgbox{
width: 315px;
height: 302px;
opacity: 1;
background: rgba(255, 255, 255, 1);
padding: 20px;
box-sizing: border-box;
}
.pr{
position: relative;
}
.txt-box{
position: absolute;
bottom: -40px;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
在plugins下引入
// 引入vue 及 組件
import Vue from 'vue'
import VueSwiper from '@/components/VueSwiper'
// 全局注冊組件
Vue.component('VueSwiper', VueSwiper)
然后是使用這個組件，在pages下新建一個honor.vue
<template>
<div class="main-container">
<PageHeader />
<!-- banner -->
<div class="banner-box">
<div class="font48 weight700 c3">資質(zhì)與榮譽</div>
<div class="font16 weight400 c7 op7 mt30">Qualifications and Honors</div>
</div>
<div class="content-box" v-for="(honorItem, index) in honorTypes" :key="index">
<div class="font36 pt100 mb40 vc" v-if="honorInfo[index] && honorInfo[index].value && honorInfo[index].value.length">{{ honorItem.title }}</div>
<div class="review-content" v-if="honorInfo[index] && honorInfo[index].value && honorInfo[index].value.length">
<vue-swiper :list="honorInfo[index]" :slidesPerView="3"></vue-swiper>
</div>
</div>
<PageFooter />
</div>
</template>
<script>
import { shareToWechat } from "../../utils/format";
export default {
name: "Honor",
data() {
return {
showType: "honor",
honorTypes: [],
honors: [],
honorInfo: []
};
},
methods:{
async findHonorTypeData() {
let _params = {
order: 'sort'
}
this.loading = true;
const res = await this.$axios.$get("/certType", { params: _params });
this.loading = false;
let _this = this
if (res && res.status === 0) {
this.honorTypes = res.result
res.result.forEach((item, i) => {
_this.findHonorsData(item.title)
})
} else {
this.$message.error(res.message);
}
},
async findHonorsData(certType) {
let _params = {
order: 'sort',
certType: certType,
pageNum: 1,
pageSize: 30
}
this.loading = true;
const res = await this.$axios.$get("/certList", { params: _params });
this.loading = false;
let _this = this
if (res && res.status === 0) {
res.result.rows.forEach((item, i) => {
item.imageUrl = `/images${item.imageUrl}`
})
let _obj = {
name: certType,
value: res.result.rows
}
_this.honorInfo.push(_obj)
} else {
this.$message.error(res.message);
}
},
},
mounted () {
this.findHonorTypeData()
}
};
</script>
<style lang="scss" scoped>
.content-box{
background-color: rgba(239, 241, 244, 1);
padding-bottom: 100px;
}
.review-content {
width: 100%;
height: 302px;
position: relative;
margin: 0 auto;
.swiperBox {
height: 360px;
width: 100%;
position: static;
padding-top: 20px;
& /deep/ {
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 315px !important;
height: 302px;/* 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-property: all;
img {
max-width: 295px;
height: auto;
max-height: 282px;
border-radius: 2px;
}
.swiper-slide-shadow-left{
background-image: none
}
.swiper-slide-shadow-right{
background-image: none
}
}
.swiper-slide-active {
.mask {
display: none;
}
}
.swiper-button-prev,.swiper-button-next {
position: absolute;
width: 34px;
height: 64px;
line-height: 64px;
border-radius: 6px;
font-size:30px;
color: #00A2FF;
top: 50%;
}
.swiper-button-prev:after,.swiper-button-next:after {
font-size: 30px;
&:hover{
background-color: none;
}
}
.swiper-button-prev {
left: 0px;
}
.swiper-button-next {
right: 0px;
}
.swiper-button-prev:hover,.swiper-button-next:hover {
background: rgba(209, 209, 209, 0.5);
color: rgba(255, 255, 255, 0.5);
}
}
}
}
.banner-box {
height: 370px;
opacity: 1;
padding: 172px 120px 0 120px;
box-sizing: border-box;
background: url(/images/productImages/honor.png) right 120px bottom 20px / 320px auto no-repeat,linear-gradient(90deg, rgba(137, 247, 254, 1) 0%, rgba(84, 156, 252, 1) 100%);;
}
.honor-box {
max-width: 990px;
padding-bottom: 82px;
margin: 0 auto;
& .honor-card {
width: 300px;
margin: 0 15px 48px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
border-radius: 4px;
background-clip: content-box;
background-color: rgba(255, 255, 255, 1);
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
&.large {
padding: 32px;
}
&.small {
padding: 19px 15px;
}
}
}
@media screen and (max-width: 768px) {
.banner-box {
height: 260px;
background-position: center top 100px, left top;
background-size: auto 80px, auto 100%;
& .banner-content {
top: 260px;
width: 100%;
}
}
.honor-box {
justify-content: center;
padding: 0 30px 20px;
& .honor-card {
width: 300px;
margin: 0 15px 20px;
}
}
}
</style>
出現(xiàn)空白頁的bug
使用了swiper的coverflowEffect效果，設(shè)置了同時顯示3個，同時開啟了loop模式。
當切換到倒數(shù)第二張時沒有新的slider生成，導致最后一張的右邊是空白的，只有切換到最后一張時才會再在后面復(fù)制新的slider，怎么讓它在顯示倒數(shù)第二張時就生成新的slider？
最后發(fā)現(xiàn)slidesPerView設(shè)置為auto，就正常了
然后調(diào)整coverflowEffect里的stretch和depth來弄就沒問題了文章來源：http://www.zghlxwxcb.cn/news/detail-854468.html
VueSwiper.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-854468.html
<template>
<div v-if="initStatus" v-swiper:mySwiper="swiperOption" class="swiper mySwiper swiperBox">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in list.value" :key="index">
<div class="pr">
<div class="swiper-slide-imgbox uf uf-ac uf-jc">
<img :src="item.imageUrl" />
</div>
<div class="font12 c8 txt-box">{{ item.title }}</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
export default {
props: {
list: {//banner數(shù)組
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
initStatus: false,//初始化狀態(tài)
swiperOption: {},//swiper參數(shù)
}
},
mounted() {
let self = this;
this.$nextTick(() => {
this.swiperOption = {
loop: true,
loopAdditionalSlides: 3,
coverflowEffect: {
rotate: 50, //側(cè)轉(zhuǎn)角度（正值凹陷）
stretch: -110,//每個slide之間拉伸值（正值緊貼）
depth: 100, //值越大為遠景（可負值）
modifier: 1, //depth和rotate和stretch的倍率
shadows: false
},
centeredSlides: true,
initialSlide: 1,
slidesPerView: 'auto',//一頁顯示幾個
spaceBetween: 10,//間隔
updateOnWindowResize: true,
watchSlidesProgress: true,//
noSwiping: true,//
effect: 'coverflow', //設(shè)置Slide的切換效果，默認為"slide"（普通位移切換），還可設(shè)置為"fade"（淡入）、"cube"（方塊）、"coverflow"（3d流）、"flip"（3d翻轉(zhuǎn)）、"cards"(卡片式)、"creative"（創(chuàng)意性）。
freeMode: 1,
autoplay: {//自動輪播//
delay: 3000, //
disableOnInteraction: false,//操作swiper后 自動輪播不會停止//
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
}
this.initStatus = true //渲染swiper
})
},
}
</script>
<style lang="scss" scoped>
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
}
.swiper-wraper {
width: 100%;
height: 100%;
z-index: 1;
display: flex;
box-sizing: content-box;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
}
.swiper-slide-imgbox{
width: 315px;
height: 302px;
opacity: 1;
background: rgba(255, 255, 255, 1);
padding: 20px;
box-sizing: border-box;
}
.pr{
position: relative;
}
.txt-box{
position: absolute;
bottom: -40px;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
到了這里，關(guān)于實現(xiàn)swiper 3d 輪播效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
