需求
-
实现垂直滚动的轮播图，并且当前选中的内容展示到左侧
image.png
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
<link rel="stylesheet" href="http://gongjialin.top/swiper-bundle.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.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: 600PX;
}
.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;
}
.swiper-slide-active {
background: burlywood;
color: red;
font-weight: bold;
font-size: 30px;
}
.active {
color: red;
font-weight: bold;
font-size: 30px;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: '';
}
i{
font-size:40px;
}
</style>
</head>
<body>
<div id="my-swiper-container">
<swiper-component></swiper-component>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="http://gongjialin.top/swiper-bundle.min.js"></script>
<script setup>
const { createApp, nextTick, watch } = Vue;
const app = createApp({
components: {
SwiperComponent: {
template: `
<div style="display:flex">
<div class="active" style="width:200px">{{ middleSlide }}</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div v-for="(slide, index) in slides" :key="index" class="swiper-slide">
{{ slide }}
</div>
</div>
<div class="swiper-button-next" style="position:absolute;left:50%;top:560px;"><i class="fas fa-angle-down"></i></div>
<div class="swiper-button-prev" style="position:absolute;left:50%;top:30px;"><i class="fas fa-angle-up"></i></div>
</div>
</div>
`,
data() {
return {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'],
middleIndex: 1, // 初始中间索引
middleSlide: 'slide1',
swiper: null
};
},
mounted() {
this.swiper = new Swiper(".mySwiper", {
direction: 'vertical',
slidesPerView: 3,
loop: true,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
transitionEnd: () => {
if (this.swiper) {
this.middleIndex = this.swiper.realIndex;
this.middleSlide = this.slides[this.middleIndex];
console.log(this.middleSlide);
}
}
}
});
},
}
}
});
app.mount("#my-swiper-container");
</script>
</body>
</html>
