vue-awesome-swiper 露出下一张图片部分+自定义按钮滑动到上一个/下一个slide

aPurpleBerry

于 2025-02-19 14:54:11 发布

阅读量549

点赞数 9

分类专栏：前端项目文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/yavlgloss/article/details/145727979

版权

前端项目专栏收录该内容

21 篇文章

订阅专栏

文章目录

配置（注意版本，这个版本比较陈旧了）
需求1露出下一张边框
需求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')}
        ],
    }
  }
}

.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();
  }
}