background-carousel

Purpose

background-carousel is a simple vue mobile carousel plugin. By setting the aspect ratio of the carousel image, the carousel image component can occupy a place in advance before the image rendering is completed.The picture will be presented as div-background.

Preview URL

https://sirjyz.github.io/background-carousel/dist/index.html

Quick start

npm install

npm run serve

Usage

Import components on pages that require carousel image component

app.vue:

<template>
  <div id="app">
    <background-carousel
      :list="carouselList"
      list-key-name="id"
      list-img-name="src"
      padding-top="40%"
      :initial-index="1"
      :autoplay-time="4000"
      :transition-time="500"
      :loop="true"
      timing-function-name="linear"
      :showIndicators="true"
      indicator-color="red"
      @clickItem="handleClickItem"
      @change="handleChange"
    />
  </div>
</template>

export default {
  data() {
    return {
      carouselList: [
        {
          id: 0,
          src:
            "https://images.pexels.com/photos/1352251/pexels-photo-1352251.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
        },
        {
          id: 1,
          src:
            "https://images.pexels.com/photos/1425174/pexels-photo-1425174.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
        },
        {
          id: 2,
          src:
            "https://images.pexels.com/photos/1352296/pexels-photo-1352296.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
        }
      ]
    };
  },
  methods: {
    handleClickItem(e) {
      // console.log(e);
    },
    handleChange(e) {
      // console.log(e);
    }
  }
};

main.js

import Vue from "vue";
import BackgroundCarousel from "background-carousel";
Vue.use(BackgroundCarousel);

Props

• list

  • type: Array
  • required: true
  • Description: List of pictures provided to the carousel component

• listKeyName

  • type: String
  • required: true
  • Description: The value of v-bind: key in the loop of the carousel component list. For example,the list is [{imgId:0,img:'picName'}], then listKeyName is 'imgId'.

• listImgName

  • type: String
  • required: true
  • Description: The key value of the picture in the cycle of the carousel component list. For example,the list is [{imgId:0,img:'picName'}], then listImgName is 'img'.

• paddingTop

  • type: String
  • default: "50%"
  • Description: Picture aspect ratio

• initialIndex

  • type: Number
  • default: 0
  • Description: Which picture to show at the beginning

• loop

  • type: Boolean
  • default: true
  • Description: Whether to enable loop

• autoplayTime

  • type: Number
  • default: 3000
  • Description: Time to switch pictures

• transitionTime

  • type: Number
  • default: 300
  • Description: Picture transform animation time

• timingFunctionName

  • type: String
  • default: "linear"
  • Description: Transition-timing-function name. For example, 'ease-out' or 'ease-out'.

• showIndicators

  • type: Boolean
  • default: true
  • Description: Whether to show the indicator

• indicatorColor

  • type: String
  • default: "#fff"
  • Description: Indicator background color

Methods

• clickItem

  • Description: Trigger event when clicked
  • Callback parameter: event: Event

• change

  • Description: Trigger event after the end of each carousel
  • Callback parameter: index(Index of current Picture)