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>

效果图