vue-awesome-swiper: 4.1.1
swiper: 5.4.5
效果图:
代码:
<template>
<div class="box">
<div class="swiper-box">
<!-- swiper1 -->
<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
<swiper-slide v-for="item in fileList" :key="item">
<div class="swiper-item">
<div class="swiper-img" style="width: 100%; height: 100%">
<img :src="item" style="width: 100%; height: 100%" alt="" />
</div>
</div>
</swiper-slide>
</swiper>
<div
class="swiper-button-next swiper-button-white"
slot="button-next"
></div>
<div
class="swiper-button-prev swiper-button-white"
slot="button-prev"
></div>
<!-- swiper2 Thumbs -->
<swiper
:options="swiperOptionThumbs"
class="gallery-thumbs"
ref="swiperThumbs"
style="margin-top: 20px"
>
<swiper-slide v-for="item in fileList" :key="item">
<img :src="item" style="width: 100%; height: 100%" />
</swiper-slide>
</swiper>
<div class="swiper-thumbs-next swiper-button-white" slot="button-next">
<svg t="1632625587130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3459" width="32" height="32"><path d="M384 512L731.733333 202.666667c17.066667-14.933333 19.2-42.666667 4.266667-59.733334-14.933333-17.066667-42.666667-19.2-59.733333-4.266666l-384 341.333333c-10.666667 8.533333-14.933333 19.2-14.933334 32s4.266667 23.466667 14.933334 32l384 341.333333c8.533333 6.4 19.2 10.666667 27.733333 10.666667 12.8 0 23.466667-4.266667 32-14.933333 14.933333-17.066667 14.933333-44.8-4.266667-59.733334L384 512z" p-id="3460" fill="#999999"></path></svg>
</div>
<div class="swiper-thumbs-prev swiper-button-white" slot="button-prev">
<svg t="1632625518037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3165" width="32" height="32"><path d="M731.733333 480l-384-341.333333c-17.066667-14.933333-44.8-14.933333-59.733333 4.266666-14.933333 17.066667-14.933333 44.8 4.266667 59.733334L640 512 292.266667 821.333333c-17.066667 14.933333-19.2 42.666667-4.266667 59.733334 8.533333 8.533333 19.2 14.933333 32 14.933333 10.666667 0 19.2-4.266667 27.733333-10.666667l384-341.333333c8.533333-8.533333 14.933333-19.2 14.933334-32s-4.266667-23.466667-14.933334-32z" p-id="3166" fill="#999999"></path></svg>
</div>
</div>
<div class="bottom-box">
<img src="../../assets/img/bottom_b.jpg" class="bottom-b-img" />
<div class="bottom-b-color">
<img src="../../assets/img/bottom_text.png" class="bottom-img" />
</div>
</div>
</div>
</template>
<style scoped>
.box {
width: 100%;
position: relative;
background-color: #fff;
padding-top: 40px;
}
/* .swiper-container {
background-color: #000;
} */
.swiper-box {
width: 960px;
margin: auto;
}
.gallery-top {
height: 80% !important;
width: 100%;
}
.gallery-thumbs {
height: 20% !important;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
.swiper-slide {
text-align: center;
height: 600px;
display: flex;
transition: 300ms;
transform: scale(0.6);
opacity: 0.3;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1);
}
.swiper-slide-next {
opacity: 0.7;
transform: scale(0.8);
z-index: 998 !important;
}
.swiper-slide-prev {
opacity: 0.7;
transform: scale(0.8);
}
.swiper-slide-active {
opacity: 1;
z-index: 999 !important;
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
--swiper-navigation-color: #999 !important;
top: 330px;
}
.gallery-thumbs .swiper-slide {
height: 180px !important;
}
.gallery-thumbs .swiper-slide-active {
border: 4px solid #006c95;
}
.swiper-thumbs-next{
position: absolute;
top: 740px;
left: 170px;
width: 40px;
height: 40px;
border-radius: 100px;
}
.swiper-thumbs-prev{
position: absolute;
top: 740px;
right: 170px;
width: 40px;
height: 40px;
border-radius: 100px;
}
.bottom-box {
width: 100%;
height: 400px;
position: relative;
margin-top: 40px;
}
.bottom-b-img {
width: 100%;
height: 100%;
position: absolute;
}
.bottom-b-color {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background: rgba(0, 108, 149, 0.6);
display: flex;
align-items: center;
}
.bottom-img {
width: 400px;
height: 100px;
margin: auto;
}
</style>
<script>
var vm = null;
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
name: "pageheader",
components: {
Swiper,
SwiperSlide,
},
data() {
return {
fileList: [
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
"https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
"https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
"https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
],
swiperOptionThumbs: {
loop: true, // 循环模式选项
spaceBetween: 0,
slidesPerView: 8,
centeredSlides: true, //设置活动块居中
slideToClickedSlide: true,
navigation: {
prevEl: ".swiper-thumbs-next",
nextEl: ".swiper-thumbs-prev",
},
on: {
slideChangeTransitionStart: function () {
vm.$refs.swiperTop.$swiper.slideToLoop(this.realIndex, 1000, false);
},
},
},
swiperOptionTop: {
loop: true, // 循环模式选项
// autoplay: true, //自动循环
slidesPerView: 4, //设置slider容器能够同时显示的slides数量(carousel模式)。
spaceBetween: -100, //在slide之间设置距离(单位px)。
centeredSlides: true, //设置活动块居中
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChangeTransitionStart: function () {
if (vm.$refs.swiperThumbs.$swiper != undefined) {
console.log(
vm.$refs.swiperThumbs.$swiper.slideToLoop(
this.realIndex,
1000,
false
)
);
}
},
},
},
};
},
created() {
vm = this;
},
mounted() {
},
methods: {
},
};
</script>