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>
相关推荐
刘一说17 分钟前
Spring Boot 主程序入口与启动流程深度解析:从 `@SpringBootApplication` 到应用就绪
java·spring boot·后端
合作小小程序员小小店18 分钟前
web开发,在线%蛋糕销售%管理系统,基于asp.net,webform,c#,sql server
开发语言·后端·asp.net·html5·教育电商
怪力乌龟39 分钟前
Go语言数组和切片
开发语言·后端·golang
Yeats_Liao40 分钟前
Go Web 编程快速入门 08 - JSON API:编码、解码与内容协商
后端·golang·json
虚行43 分钟前
Go 编程基础
开发语言·后端·golang
脚踏实地的大梦想家1 小时前
【Go】P14 Go语言核心利器:全面解析结构体 (Struct)
开发语言·后端·golang
QX_hao1 小时前
【Go】--time包的使用
开发语言·后端·golang
IT_陈寒1 小时前
Vite 3.0终极提速指南:5个鲜为人知的配置技巧让构建效率翻倍
前端·人工智能·后端
武子康1 小时前
大数据-137 ClickHouse MergeTree 实战指南|分区、稀疏索引与合并机制 存储结构 一级索引 跳数索引
大数据·后端·nosql
程序员鱼皮2 小时前
前后端分离,千万别再搞错了!
java·前端·后端·计算机·程序员·编程·软件开发