vue3使用swiper轮播组件-6ren

vue3使用swiper轮播组件

转载作者：撒哈拉更新时间：2024-10-22 18:18:59

56

4

本地环境信息

node版本:

nodejs : v18.20.4
npm : 10.7.0

vue版本。

  "dependencies": {
    "vue": "^3.2.13",
    ...
  }

安装swiper依赖

执行命令:

npm i swiper

安装后，查看工程中的package.json文件，新增了swiper依赖（默认最新版）:

  "dependencies": {
    "swiper": "^11.1.14",
    "vue": "^3.2.13",
    ...
  }

轮播图默认效果

效果说明:

1、多张图片自动播放 2、有指示器 3、有左右导航按钮（向前、向后）。

图片导入工程

代码实现

<template>
  <swiper
      class="swiper-container"
      :slides-per-view="1"
      :space-between="0"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :modules="modules"
      :pagination="{ clickable: true }"
      :autoplay="{
      delay: 2000,
      disableOnInteraction: false,
      }"
      navigation
      :loop="true"
  >
    <swiper-slide>
      <img class="item" src="@/assets/banner/0.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/1.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/2.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/3.jpg"/>
    </swiper-slide>
  </swiper>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

const modules = [Navigation, Pagination, A11y, Autoplay]
const swiperInstance = ref<typeof Swiper | null>(null);

const onSwiper = (swiper: typeof Swiper) => {
  swiperInstance.value = swiper;
};
const onSlideChange = () => {
  console.log('slide change');
};
</script>

<style scoped>
.swiper-container {
  background-color: white;
}

.item {
  width: 100%;
  height: auto;
}
</style>

代码释义：

导入swiper组件：Swiper容器；SwiperSlide子项容器。

import {Swiper, SwiperSlide} from 'swiper/vue';

导入module：因为swiper将不同功能进行组件化拆分，使其更灵活化，我们使用具体的功能，只需导入相应的module即可。导航（左右按钮功能）、Pagination（分页指示器功能）、A11y （辅助功能模块，旨在提高网站或应用的可访问性）、Autoplay（自动播放功能）。

import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules';
const modules = [Navigation, Pagination, A11y, Autoplay]

导入相关样式，按功能导入相应的css:

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

template中使用Swiper、SwiperSlide组件，并配置module、属性、事件等。

:slides-per-view: 这个属性设置了每个滑块（slide）的可见数量。在这里，设置为 1 表示每次只显示一个滑块。
:space-between：这个属性设置了滑块之间的间距。在这里，设置为 0 表示滑块之间没有间距。
@swiper="onSwiper"：这个属性是一个事件监听器，当 Swiper 初始化完成时会触发名为 "onSwiper" 的方法。
@slideChange="onSlideChange"：这个属性是另一个事件监听器，当滑块切换时会触发名为 "onSlideChange" 的方法。
:modules：这个属性指定了 Swiper 实例所使用的模块。通过这个属性，可以配置 Swiper 实例使用的各种功能模块【此处配置了导航、指示器、自动播放等】。
:pagination：这个属性配置了 Swiper 的分页指示器，设置为可点击，用户可以通过点击分页器来切换到不同的滑块。
:autoplay：这个属性配置了自动播放功能，设置了播放延迟为 2000 毫秒（2秒），并且当用户交互时不停止自动播放。
navigation：这个属性开启了 Swiper 的导航按钮，通常会显示左右箭头或其他导航元素，用于用户手动导航滑块。
:loop：这个属性设置了 Swiper 是否循环播放滑块内容，即当滑动到最后一个滑块时是否自动切换到第一个滑块。设置为 true 表示开启循环播放。

<swiper
      class="swiper-container"
      :slides-per-view="1"
      :space-between="0"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :modules="modules"
      :pagination="{ clickable: true }"
      :autoplay="{
      delay: 2000,
      disableOnInteraction: false,
      }"
      navigation
      :loop="true"
  >
    <swiper-slide>
      <img class="item" src="@/assets/banner/0.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/1.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/2.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/3.jpg"/>
    </swiper-slide>
  </swiper>

定义swiper实例，用于后续swiper操作，例如：跳转下一页、暂停自动播放等等。

const swiperInstance = ref<typeof Swiper | null>(null);

事件方法定义。

//初始化swiper后，为swiperInstance赋值
const onSwiper = (swiper: typeof Swiper) => {
  swiperInstance.value = swiper;
};
//监听slide滑块更改事件回调
const onSlideChange = () => {
  console.log('slide change');
};

实现效果

优化自动播放效果

当前自动播放不受外界影响，如果用户鼠标移入swiper，应该让swiper暂停滑动，方便用户查看当前滑块的具体信息；如果鼠标滑出swiper，应该继续自动滑动.

实现：

swiper组件监听鼠标移入、移出事件:

@mouseenter="pauseSwiper"
@mouseleave="resumeSwiper"

script中，实现对应的方法:

const pauseSwiper = () => {
  if (swiperInstance.value) {
    swiperInstance.value.autoplay.stop();
  }
};
const resumeSwiper = () => {
  if (swiperInstance.value) {
    swiperInstance.value.autoplay.start();
  }
};

自定义左右导航按钮

swiper自带的导航按钮，多数情况下需要根据UI设计调整其效果/样式.

此处我们模拟修改下，作用导航按钮.

script中，先实现左右切换滑块的功能:

const goPrev = ()=> {
  if (swiperInstance.value) {
    swiperInstance.value.slidePrev();
  }
};
const goNext = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slideNext();
  }
};

swiper组件上不再配置默认的navigation属性。导入按钮图片:

布局中新增左右按钮，并设置样式:

  <div class="custom-navigation">
      <img src="@/assets/img_pre.png" class="custom-swiper-button-prev" @click="goPrev">
      <img src="@/assets/img_next.png" class="custom-swiper-button-next" @click="goNext">
  </div>

.custom-swiper-button-prev, .custom-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #FFFFFF;
  font-size: 20px;
  width: 50px;
  height: 50px;
}

.custom-swiper-button-next {
  right: 20px;
}

.custom-swiper-button-prev {
  left: 20px;
}

自定义导航按钮效果:

完整代码

<template>
  <swiper
      class="swiper-container"
      :slides-per-view="1"
      :space-between="0"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :modules="modules"
      :pagination="{ clickable: true }"
      :autoplay="{
      delay: 2000,
      disableOnInteraction: false,
      }"
      :loop="true"
      @mouseenter="pauseSwiper"
      @mouseleave="resumeSwiper"
  >
    <swiper-slide>
      <img class="item" src="@/assets/banner/0.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/1.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/2.jpg"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/3.jpg"/>
    </swiper-slide>
  </swiper>
  <div class="custom-navigation">
      <img src="@/assets/img_pre.png" class="custom-swiper-button-prev" @click="goPrev">
      <img src="@/assets/img_next.png" class="custom-swiper-button-next" @click="goNext">
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

const modules = [Navigation, Pagination, A11y, Autoplay]
const swiperInstance = ref<typeof Swiper | null>(null);

const onSwiper = (swiper: typeof Swiper) => {
  swiperInstance.value = swiper;
};
const onSlideChange = () => {
  console.log('slide change');
};

const pauseSwiper = () => {
  if (swiperInstance.value) {
    swiperInstance.value.autoplay.stop();
  }
};
const resumeSwiper = () => {
  if (swiperInstance.value) {
    swiperInstance.value.autoplay.start();
  }
};
const goPrev = ()=> {
  if (swiperInstance.value) {
    swiperInstance.value.slidePrev();
  }
};
const goNext = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slideNext();
  }
};
</script>

<style scoped>
.swiper-container {
  background-color: white;
}

.item {
  width: 100%;
  height: auto;
}

.custom-swiper-button-prev, .custom-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #FFFFFF;
  font-size: 20px;
  width: 50px;
  height: 50px;
}

.custom-swiper-button-next {
  right: 20px;
}

.custom-swiper-button-prev {
  left: 20px;
}
</style>

最后此篇关于vue3使用swiper轮播组件的文章就讲到这里了,如果你想了解更多关于vue3使用swiper轮播组件的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

56

4

0

文章推荐： HTB打靶记录-Infiltrator

文章推荐：【八叉树】从上千万个物体中【**瞬间**】就近选取坐标

文章推荐：一文了解Conda（包教包会，不会留言）

文章推荐：使用RadzenBlazor组件库开发的基于ABP框架炫酷UI主题

vue.js - Vue 过滤器从 vue 1 迁移到 vue 2
我在将过滤器从 vue 1 迁移到 vue 2 时遇到问题，我在这里完全创建了我需要的东西(突出显示与输入文本匹配的文本): Vue.component('demo-grid', { templa
vue.js - vue 外部函数，将数据传入 vue
我有一个在 vue 组件外部运行的函数。我想要将它返回的数据传递给vue组件中的数据。 function example(){ var item = 'item'
vue.js - Vue 插件 - Vue 已定义但从未使用过
我正在尝试安装一个 Vue 插件，以便我可以使用选项管理一些 API 调用。我有一个 stocks.js 文件，我想从中进行 API 调用。当我执行以下操作时，出现'Vue is defined b
vue.js - Vue 指令访问 Vue 实例？
如何从指令访问 Vue 实例？我有这个 HTML 和这个脚本 var app = new Vue({ el: '#vueApp', data: { myData:
vue.js - 在 .vue 文件中使用 Vue.set() 和 Vue.use()
如何在 .vue 文件中使用 Vue.set() 和 Vue.use()？我正在使用 vue-cli 搭建我的项目，我需要使用 Vue.use(VeeValidate) 进行验证。我也想使用类似下面的
javascript - import { Component, Vue } from "vue-property-decorator"与 import Vue from "vue"
从 vue-property-decorator 和 vue 导入 Vue 之间有什么区别和用例？据我所知，在使用 @Component 装饰器定义自定义组件时，我始终需要从 vue-property
vue.js - 在本地 Vue 应用程序中热重载本地 Vue 插件的方法？
有没有办法使用 yarn serve(可能使用 webpack/vuetify-loader)在本地 Vuetify 应用程序的本地 npm 依赖项上发生热重载？商业案例我们有一些通用的 Vuet
vue.js - Vue 插槽在罕见且不可预测的情况下不起作用(潜在的 vue 错误？)
我有一个在某些未知情况下不可靠的插槽的奇怪错误。成分有3个层次组件。孙子 (headlessTable)，它提供一个名为 arrayValue 的插槽. 子项 (collapsableCard)
vue.js - 我可以在 Vue 原生组件中导入和使用 Vue 组件吗？
我是 Vue 本地新手，我也遇到了一个问题，can I use the Vue component inside a Vue native component such as Vue-chart an
vue.js - Vue 3 - Vue.delete 替代方案
Vue.delete 的替代方案是什么？在 Vue 3 的新 Reactivity API 中？最佳答案 Vue.delete和 Vue.set在 Vue 3 中不需要。通过使用代理的新 react
vue.js - Vue 3 : Vue. createApp 不是构造函数
我是 Vue 的新手，正在尝试学习如何使用它。我想我在尝试安装一个新的 Vue 应用程序时被绊倒了。这是我可以开始工作的内容: const vm = new Vue({}) 从那里我可以安装
vue.js - Vue js，bootstrap-vue。在表中无效的过渡效果
我使用boots-vue。我从文档https://bootstrap-vue.js.org/docs/components/table/#table-body-transition-support中举
vue.js - Jest +vue : "Cannot find module ....vue"
我真的只是想为我的图书馆建立一个 jest+vue 的框架，并迅速得到这个错误。我知道这个结构不是通常的笑话结构，我在这里尝试用一个辅助控件来描述一个测试。这是我的test的内容文件夹:array
vue.js - 使用仅限运行时的 Vue 时如何配置 Vue-router
我正在尝试使用基于 examples 的 vue-router ，如 let routes = [ { path: '/', component: MainComponent }, ];
vue.js - Vue 模块组件检测 Vue.js 版本？
我有一个想要通过简单的 v-model 功能发布到 NPM 的组件。因此，如果它能够在 vuejs 2/3 上互换运行那就更理想了。我可以通过将组件设置为发出 input 和 update:mod
vue.js - Vue 和 Bootstrap Vue - 动态使用插槽
我正在尝试在 bootstrap-vue 表中创建一个插槽，以使用自定义组件呈现任何 bool 值。所以我有一个简单的表格现在，如果我想以特定方式渲染单个列，我必须使用插槽它有
vue.js - 创建主 Vue 实例之前的 Vue 路由
Vue Router 在主 Vue 实例之前加载，但要加载该 Router，我应该准备一些信息，然后将它们作为属性传递给此 Route。在此示例中，它是从主 Vue 实例传递到主屏幕的 current
vue.js - Vue 模块组件检测 Vue.js 版本？
我有一个想要通过简单的 v-model 功能发布到 NPM 的组件。因此，如果它能够在 vuejs 2/3 上互换运行那就更理想了。我可以通过将组件设置为发出 input 和 update:mod
vue.js - 如何将 Vue 路由器与 Vue 集成
我找到了一个关于如何使用 Vue 路由器的很好的例子。这是 app.js 文件: // Telling Vue to use the router Vue.use(VueRouter) // Init
vue.js - 如何将参数从 vue 自定义元素传递到 vue 组件？
我没有完整的 vue 应用程序，所以我使用 custom elements替换一些应该用 vue 处理的元素。我只想使用 vue multiselect plugin在 html 文件中。所以我尝

首页

博学

6Ren·AI

商城