首页 > 极客资料 博客日记

vue3 使用swiper轮播组件

2024-10-22 18:30:05极客资料围观13

文章vue3 使用swiper轮播组件分享给大家,欢迎收藏极客之家,专注分享技术知识

1. 本地环境信息参考

node版本:

nodejs : v18.20.4
npm : 10.7.0

vue版本

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

2. 安装swiper依赖

执行命令:

npm i swiper

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

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

3. 轮播图默认效果

模拟轮播图需求说明:

1、多张图片,可自动播放
2、有指示器
3、有左右导航按钮(向前、向后)

图片导入工程

代码实现 & 释义:

导入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、属性、事件等

<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>

: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实例,用于后续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');
};
实现效果

完整代码参考
<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>

4. 优化自动播放效果

如果用户鼠标移入swiper,应该让swiper暂停滑动,方便用户查看当前滑块的具体信息;如果鼠标滑出swiper,应该继续自动滑动。

实现:

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

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

script代码中,实现对应的方法:

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

5. 自定义左右导航按钮

多数情况下,需要参考项目的UI设计稿,调整左右导航按钮效果/样式。

此处,我们模拟修改下,使用两张图片作为左右导航按钮。

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

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

swiper ui组件上不再配置默认的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>


版权声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!

标签:

相关文章

本站推荐

标签云