vue-awesome-swiper 露出下一张图片部分+自定义按钮滑动到上一个/下一个slide
文章目录
- 配置（注意版本，这个版本比较陈旧了）
- 需求1露出下一张边框
- 先是在官网上看到了slidesPerView配置项
- 参考官网案例
- 总结解决方法
- gpt手写
- 参考文章
- 需求2 自定义跳转函数
配置（注意版本，这个版本比较陈旧了）
swiper几乎每一个版本的配置都不一样，而且这个vue-awesome-swiper已经废弃了。
我的配置同之前这篇文章：《解决vue-awesome-swiper 4.x + swiper 5.x 分页pagination配置不生效问题》
{
"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1"
}
需求1露出下一张边框
swiper露出下一张边框（在方向为horizontal的情况下）。
先是在官网上看到了slidesPerView配置项
https://www.swiper.com.cn/api/carousel/24.html
// vue
data() {
return {
swiperOPtion: {
loop: true,
spaceBetween: 10,
slidesPerView: 'auto'
}
}
}
这么加上之后边框其实是是生效的，但是没有实现查看下一张图片的效果
参考官网案例
本来还想着自己写一个轮播图，但是在官网的案例中看到了 carousel 里的案例，发现是有这种情况的。
https://www.swiper.com.cn/demo/120-slides-per-view-auto.html
注意这个网址，直接右键查看源代码
关键点就在这里的 swiper-slide这里 ，设置了width: 80%，再搭配上前文的配置项slidesPerView: 'auto'即可实现。
总结解决方法
引入swiper之后
- js配置
export default {
data() {
return {
// swiper配置
swiperOption: {
loop: true,
speed: 1000,
// autoplay: true,
autoplay: {
delay: 3000,
},
direction: 'horizontal', // 方向
slidesPerView: 'auto', // 必须写
spaceBetween: 10,
// 分页配置
pagination: {
el: '.swiper-pagination',
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'my-bullet',
clickable: true
},
},
// swiper数据
swipeData: [
{ url: require('@/assets/xxxxxxxxxxxxxx.png')},
{ url: require('@/assets/xxxxxxxxxxxxxx2.png')},
{ url: require('@/assets/xxxxxxxxxxxxxx3.png')}
],
}
}
}
- css
.booking-swiper {
width: 800px;
height: 800px;
.swipe-box {
width: 100%;
height: 800px;
img {
width: 100%;
height: auto;
}
.swiper-slide{
width: 80%;
}
}
.swiper-pagination {
width: 100%;
height: setRem(100);
}
}
gpt手写
可以参考一下，如果时间来不及研究官网api、或者公司需求要求更精细的话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图显示下一张边缘</title>
<style>
.carousel {
width: 80%;
margin: 50px auto;
overflow: hidden;
padding: 0 40px; /* 左右内边距让下一张图边缘露出 */
position: relative;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 80%; /* 图片占轮播宽度的80%，剩下20%用于显示下一张边缘 */
margin-right: 20px; /* 图片间距 */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.carousel-item img {
width: 100%;
height: auto;
display: block;
}
.buttons {
text-align: center;
margin-top: 20px;
}
.buttons button {
padding: 10px 20px;
margin: 0 10px;
border: none;
background-color: #3498db;
color: white;
border-radius: 6px;
cursor: pointer;
}
.buttons button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-track">
<div class="carousel-item"><img src="https://via.placeholder.com/600x300/FF5733/FFFFFF?text=1" alt="1"></div>
<div class="carousel-item"><img src="https://via.placeholder.com/600x300/33FF57/FFFFFF?text=2" alt="2"></div>
<div class="carousel-item"><img src="https://via.placeholder.com/600x300/3357FF/FFFFFF?text=3" alt="3"></div>
<div class="carousel-item"><img src="https://via.placeholder.com/600x300/FF33A6/FFFFFF?text=4" alt="4"></div>
</div>
</div>
<div class="buttons">
<button onclick="moveSlide(-1)">上一张</button>
<button onclick="moveSlide(1)">下一张</button>
</div>
<script>
const track = document.querySelector('.carousel-track');
const items = document.querySelectorAll('.carousel-item');
const itemWidth = items[0].offsetWidth + 20; // 图片宽度 + margin-right
let currentIndex = 0;
function moveSlide(direction) {
currentIndex += direction;
if (currentIndex < 0) currentIndex = 0;
if (currentIndex >= items.length - 1) currentIndex = items.length - 1;
track.style.transform = `translateX(-${itemWidth * currentIndex}px)`;
}
</script>
</body>
</html>
参考文章
官网demo：https://www.swiper.com.cn/demo/120-slides-per-view-auto.html
官网slidesPerView： https://www.swiper.com.cn/api/carousel/24.html
需求2 自定义跳转函数
我在官网找到 函数 slidePrev 和 slideNext 后，百度搜索，直接用ai的代码，成功。
- 其实就是直接通过
this.$refs操作方法
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in list" :key="index">
<img :src="item.img" />
</swiper-slide>
</swiper>
<button @click="swiperPrev">上一张</button>
<button @click="swiperNext">下一张</button>
methods: {
swiperPrev() {
this.$refs.mySwiper.$swiper.slidePrev();
},
swiperNext() {
this.$refs.mySwiper.$swiper.swiperNext();
}
}