Package Exports

light-swiper-v3
light-swiper-v3/index.vue

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (light-swiper-v3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

效果图

效果展示