Vue+Swiper实现轮播图效果

效果展示

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

背景

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

设计

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

也可以选择 **Swiper Element**的形式

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

版本

  • Vue 3.3.4

  • Swiper 11.0.4

  • Node 20.9.0

页面代码

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

  • 安装 Swiper

    text 复制代码
    npm install swiper
  • 页面布局

    text 复制代码
    <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>
相关推荐
Kiri霧9 小时前
在actix-web应用用构建集成测试
后端·rust·集成测试
Victor3569 小时前
Redis(67)Redis的SETNX命令是如何工作的?
后端
Victor3569 小时前
Redis(66)Redis如何实现分布式锁?
后端
凤山老林10 小时前
新一代Java应用日志可视化与监控系统开源啦
java·后端·开源
Kiri霧17 小时前
Rust开发环境搭建
开发语言·后端·rust
间彧18 小时前
Spring事件监听与消息队列(如Kafka)在实现解耦上有何异同?
后端
间彧18 小时前
Java如何自定义事件监听器,有什么应用场景
后端
叶梅树18 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
间彧18 小时前
CopyOnWriteArrayList详解与SpringBoot项目实战
后端
间彧18 小时前
SpringBoot @FunctionalInterface注解与项目实战
后端