light-swiper-v2

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

vue3 版本

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

使用方式

首先安装 light-swiper-v2 组件

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

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

局部引入

 import LightSwiper from "light-swiper-v2"

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

 import LightSwiper from "light-swiper-v2"
 Vue.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	是否显示左右切换图标(值为 auto 时移动端关闭,PC 端开启 )	Boolean/'auto'	'auto'	no

组件调用示例

自定义内容

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

这里演示局部引入的方式

   <template>
  <LightSwiper :imgs="imgs">
    <div
      class="swiper_inner"
      v-for="(img, index) in imgs"
      :key="img"
      :slot="index"
    >
      <h2>light-swiper-demo {{getImgDesc(index) }}</h2>
    </div>
  </LightSwiper>
</template>

<script>
import LightSwiper from "light-swiper-v2";
export default {
  components: {
    LightSwiper,
  },
  data() {
    return {
      imgs: [
        "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",
      ],
    };
  },
  methods: {
    getImgDesc(index) {
      const descMapArr = ["狮子", "跑车", "海滩"];
      return descMapArr[index];
    },
  },
};
</script>
<style>
.swiper_inner {
  position: absolute !important;
  color: white;
  bottom: 20%;
  width: 100%;
  text-align: center;
  left: 0;
}
</style>

效果图