Vue+Swiper实现轮播图效果

效果展示

• 实现了自带切换按钮在图片外部
• 实现了自定义的切换按钮

背景

在项目中使用到了轮播图，实现点击上一张下一张时实现循环显示，同时预览两个图片，并加以文字对图片的说明。

设计

使用 Swiper 插件，可以实现当前这个需求。核心代码就两块，一块布局，一块样式。参考官网发现有很多种实现方式，本文选择单页面引入的方式。

也可以选择 Swiper Element的形式

文本链接如下：https://swiperjs.com/element

版本

• Vue 3.3.4
• Swiper 11.0.4
• Node 20.9.0

页面代码

如果遇到按钮无法生效，页面样式等问题，排查引入的 CSS 是否正确

• 安装 Swiper

  npm install swiper

• 页面布局

  
  <template>
    <div class="outbox">
      <swiper
      loop="true"
      :modules="modules"
      :slides-per-view="2"
      :space-between="50"
      navigation
      :pagination="{ clickable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      class="inbox"
    >
    <swiper-slide><img src="@/images/1.jpg" />第一个</swiper-slide>
      <swiper-slide><img src="@/images/2.jpg" />第二个</swiper-slide>
      <swiper-slide><img src="@/images/3.jpg" />第三个</swiper-slide>
      <swiper-slide><img src="@/images/4.jpg" />第四个</swiper-slide>
      <swiper-slide><img src="@/images/5.jpg" />第五个</swiper-slide>
    </swiper>
    
  
    </div>
          <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev" slot="button-prev" @click='swiperPrev'></div>
      <div class="swiper-button-next" slot="button-next" @click='swiperNext'></div>
  
  </template>
  <script>
    // import Swiper core and required modules
    import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
    // Import Swiper Vue.js components
    import { Swiper, SwiperSlide } from 'swiper/vue';
    // Import Swiper styles
    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import 'swiper/css/scrollbar';
    // Import Swiper styles
    export default {
      components: {
        Swiper,
        SwiperSlide,
      },
      setup() {
        const onSwiper = (swiper) => {
          console.log(swiper);
        };
        const onSlideChange = () => {
          console.log('slide change');
        };
        return {
          onSwiper,
          onSlideChange,
          modules: [Navigation, Pagination, Scrollbar, A11y],
        };
      },
      methods: {
    swiperNext() {
      const swiper = document.querySelector('.swiper').swiper;
      swiper.slideNext();
    },
    swiperPrev() {
      const swiper = document.querySelector('.swiper').swiper;
      swiper.slidePrev();
    },
  }
    };
  </script>
  <style>
  .outbox{
    position: relative;
    padding: 0 50px;
    width: 1000px;
  }
  .inbox{
    margin-top: 50px;
    position: initial;
  }
  </style>