Vue+Swiper实现轮播图效果

简介: 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>
目录
相关文章
|
2天前
|
JavaScript
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
8 0
|
2天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
6 0
|
2天前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
6 0
|
2天前
|
JavaScript 前端开发
vue 实现在线预览PDFpdf文件
vue 实现在线预览PDFpdf文件
12 0
|
2天前
|
JavaScript
vue下拉列表
vue下拉列表
5 0
vue下拉列表
|
2天前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
|
3天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
5 0
|
4天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
6 0
|
5天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
5天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
12 0