vue中使用vue-awesome-swiper，并且一个页面里有多个swiper_vue-awesome-swiper一屏显示2个-优快云博客

本文介绍了如何在HTML中使用Swiper库创建滑动导航。通过为类名添加额外标识，如'prev-member'和'next-member'，并配置Swiper的nextEl和prevEl属性，可以实现不同滑动效果。示例代码展示了在垂直滑动模式下，两个独立的Swiper实例的设置方法，每个实例都有自己的分页器和导航按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在class里面多加一个类名

    <div class="swiper-button-prev prev-member">
      <img class="img-navigation" src="../../../assets/home/control_left@2x.png">
    </div>
    <div class="swiper-button-next next-member">
      <img class="img-navigation" src="../../../assets/home/control_right@2x.png">
    </div>

2、在navigation里加上这个类名

        navigation: {
          nextEl: '.swiper-button-next.next-member',
          prevEl: '.swiper-button-prev.prev-member'
        }

3、如果使用new Swiper，直接在div里加上不同的类名，在new的时候用上

<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

 const mySwiper = new Swiper ('.swiper1', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    pagination: {
      el: '.swiper-pagination.swiper1',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  }) 

 const mySwiper = new Swiper ('.swiper2', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    pagination: {
      el: '.swiper-pagination.swiper2',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })