light-swiper-v3

• 一个基于 vue3 的轻量级轮播图组件
• 兼容移动端,依赖少,易应用
• 支持手势切换以及点击切换
• 轮播形式为无缝轮播

vue2 版本

https://www.npmjs.com/package/light-swiper-v2

使用方式

首先安装 light-swiper-v3 组件

 npm config get registry
 //如果不是https://registry.npmjs.org 则设置npm的registry地址
 npm config set registry https://registry.npmjs.org
 npm install light-swiper-v3

在 vue3 项目中引入或者全局注册组件后直接使用

局部引入

 import LightSwiper from "light-swiper-v3"

全局注册(这里演示在 main.js 中全局注册的方式)

  import { createApp } from 'vue'
  import LightSwiper from "light-swiper-v3"
  const app=createApp(App)
  app.component('LightSwiper',LightSwiper)

配置

参数

参数	名称	类型	默认值	必需参数
imgs	轮播图图片对应 url	Array	["", "", "", ""]	yes
duration	图片切换间隔(单位:ms)	Number	4000	no
indicatorBg	底部指示器背景开关	Boolean	false	no
indicatorSytle	顶部指示器样式(可选样式有:'round'、'rect')	String	'rect'	no
noOperationDuration	无操作 n 秒后自动轮播(单位:ms)	Number	10000	no
width	宽度	Number	window.innerWidth	no
height	高度	Number	window.innerHeight	no
showArrow	是否显示切换图标(移动端关闭,PC 端开启 )	Boolean/'auto'	'auto'	no

组件调用示例

自定义内容

以示例中的插槽的形式传入自定义内容,这里要注意,自定义内容的样式需要自己定义

这里演示局部引入的方式

<script setup>
import {ref} from "vue"
import LightSwiper from "light-swiper-v3";
const imgs=ref([
  'https://wallpaperswide.com/download/lion_5-wallpaper-1920x1080.jpg',
 'https://wallpaperswide.com/download/supercar_night_city-wallpaper-1920x1080.jpg',
 'https://wallpaperswide.com/download/panorama_of_point_reyes_headlands_from_chimney_rock_trail_point_reyes_national_seashore_california-wallpaper-1920x1080.jpg'])

function getImgDesc(index){
  const descMapArr=['狮子','跑车','海滩'];
  return descMapArr[index]
}
</script>

<template>
  <LightSwiper :imgs="imgs">
    <template v-for="(img, index) in imgs" :key="img" v-slot:[index]>
      <div class="swiper_inner">
        <h2>light-swiper-demo {{ getImgDesc(index) }}</h2>
      </div>
    </template>
  </LightSwiper>
</template>
<style>
.swiper_inner {
    position: absolute !important;
    color: white;
    bottom: 20%;
    width: 100%;
    text-align: center;
    z-index: 999;
    left: 0;
}
</style>

效果图