1.0.4 • Published 1 year ago
light-swiper-v3 v1.0.4
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>效果图
