Vue3使用Swiper实现轮播图示例详解

目录
  • 正文
    • Swiper 的参数
    • 代码实现
      • Error: Can‘t resolve ‘swiper/css/swiper.css‘ 如何解决
    • 其它方式

正文

Vue 或者 React 都可以使用 Swiper 来实现轮播图，并且可以满足大部分使用场景。

在实现轮播图的过程踩了一些坑，并且由于 Vue2 和 Vue3 版本的差异，试了几种不同的写法，最终终于实现，轮播图的基础效果如下：

Swiper 的参数

  • slidesPerView：每次显示几个轮播图
  • spaceBetween：每个轮播图之间的间距（单位：px）
  • loop：是否循环滚动
  • centeredSlides：是否居中对齐（true:居中，false：左对齐），默认 false 左对齐，
  • autoplay：是否自动播放
  • navigation：是否左右切换箭头
  • pagination：分页配置
    • clickable：在点击分页圆点的时候，是否进行切换
  • scrollbar：显示滚动条
    • draggable：滚动条可拖动
  • autoplay：切换图片的频率（毫秒为单位）
    • delay：切换的时间（单位：毫秒ms）
    • disableOnInteraction：滑动图片后不禁用自动播放 delay: 2500, disableOnInteraction: false,

其他参数配置可参考官方 API：Swiper

代码实现

<template>
  <div class="swiperbox">
    <swiper
      :slidesPerView="1"
      :spaceBetween="30"
      :loop="true"
      :centeredSlides="true"
      :pagination="{ clickable: true}"
      :autoplay="{ delay: 2500, disableOnInteraction: false}"
      :navigation="true"
      :modules="modules"
    >
      <swiper-slide><img src="@/assets/images/swiper1.png" alt="" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/swiper2.png" alt="" /></swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'// 分页器
// import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

const modules = [Autoplay, Pagination, Navigation, A11y]
</script>

注：

  • 创建一个 modules 数组，目的是为了正常使用分页器和对应功能
  • 如果是 setup 钩子函数的写法，注意最后要 return 分页相关的配置。

Error: Can‘t resolve ‘swiper/css/swiper.css‘ 如何解决

解决方案： 在引入的文件中将其改为：import 'swiper/swiper-bundle.css'

其它方式

除了 Swiper ，还有一种更简便的方法，就是使用 ElementUI 或 Antd 的轮播图组件（ Carousel 走马灯组件），可实现较为基础的需求。

以上就是Vue3使用Swiper实现轮播图示例详解的详细内容，更多关于Vue3 Swiper轮播图的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3中使用swiper的完整版教程(超详细!)

    目录 介绍 使用方式 总结 介绍 在 vue3 中使用 swiper, 实现轮播图的效果:如果组件样式等模块引入不当,很有可能导致,页面无效果:或者想要的箭头或者切换效果异常问题.具体使用方式如下所示: 使用方式 使用命令 npm install swiper 安装 swiper插件: 在main.js里使用样式文件,如下所示: import App from './App.vue' import router from './router' import VueAwesomeSwiper fr

  • vue3.x使用swiper实现卡片轮播

    vue3.x使用swiper实现卡片轮播

    本文实例为大家分享了vue3.x使用swiper实现卡片轮播的具体代码,供大家参考,具体内容如下 版本号: vue/cli:4.5.12swiper:^6.8.4 安装 npm install --save swiper 使用以及配置 <div class="swiper-container home_swiper">     <div class="swiper-wrapper">         <div class="s

  • vue3.x使用swiperUI动态加载图片失败的解决方法

    vue3.x使用swiperUI动态加载图片失败的解决方法

    本文实例为大家分享了vue3.x使用swiperUI动态加载图片失败的具体解决方法,供大家参考,具体内容如下 版本号: vue/cli:4.5.12swiper:^6.8.4 问题 1.动态加载图片,但是动态加载图片为空,需要显示默认图片时使用v-if失效 <div class="swiper-container home_swiper">     <div class="swiper-wrapper" v-if="aImages.len

  • jQuery轮播图实例详解

    jQuery轮播图实例详解

    本文实例为大家分享了jQuery轮播图实例的具体代码,供大家参考,具体内容如下 1.html+css+js代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; } body{ padding: 20px; } #containe

  • 原生JS实现的轮播图功能详解

    原生JS实现的轮播图功能详解

    本文实例讲述了原生JS实现的轮播图功能.分享给大家供大家参考,具体如下: 一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2..prev存放向左的箭头,.next存放向右的箭头: 3.pointer意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示: 4..m-view,意为视窗,即每次看到图片的窗口,它存放以上所有的部件: (二)CS

  • jQuery实现的自定义轮播图功能详解

    jQuery实现的自定义轮播图功能详解

    本文实例讲述了jQuery实现的自定义轮播图功能.分享给大家供大家参考,具体如下: jquery实现轮播图 web网页上的首页,经常会出现轮播图. 第三方的轮播图存在效果单一,扩展性低等问题. 自定义录播图特点: 1.功能全面 2.可维护性高 3.扩展性高 4.易于兼容其他前端框架 效果图: 实现思路: 1.布局 通过叠罗汉方式将图片展示区.上一张下一张点击区,指示灯展示区层叠显示 主画布wrap层在最低层,其次是图片展示区,上一张下一张点击区覆盖图片展示区, 指示灯展示区覆盖图片展示区. 2.

  • Vue使用Swiper封装轮播图组件的方法详解

    Vue使用Swiper封装轮播图组件的方法详解

    目录 Swiper 为什么要封装组件 开始封装 1.下载安装Swiper 2.引入css样式文件 3.引入js文件 4.把官网使用方法中的HTML结构复制粘贴过来 5.初始化Swiper 自定义效果 完整代码 效果展示 Swiper Swiper是一个很常用的用于实现各种滑动效果的插件,PC端和移动端都能很好的适配. 官网地址:www.swiper.com.cn/ 目前最新版本是Swiper7,但众所周知最新版本通常不稳定,所以这里使用Swiper6来封装. Swiper各版本区别: 为什么要封

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • Swiper实现轮播图效果

    本文实例为大家分享了Swiper实现轮播图效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width

  • Vue3.0手写轮播图效果

    Vue3.0手写轮播图效果

    本文实例为大家分享了Vue3.0手写轮播图效果的具体代码,供大家参考,具体内容如下 让我们开始把 html结构 <template> <div class="xtx-carousel" @mouseleave="enterFn" @mouseenter="leaveFn"> <ul class="carousel-body"> <li class="carousel-item

  • vue修改swiper框架轮播图小圆点的样式不起作用的解决

    目录 swiper框架轮播图小圆点样式不起作用 不要加 scoped swiper小圆点默认样式改变 swiper框架轮播图小圆点样式不起作用 不要加 scoped 下面是错误写法 <style  scoped>  .swiper-pagination-bullet-active {     background: white;   } </style> 正确写法 <style >  .swiper-pagination-bullet-active {     back

  • BootStrap的JS插件之轮播效果案例详解

    BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • 第十篇BootStrap轮播插件使用详解

    第十篇BootStrap轮播插件使用详解

    Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果图如下所示: 关键代码如下: <div id="carousel-example-generic" c

随机推荐