vue-banner-better v1.3.0

vue-banner-better

better banner(swiper,carousel) component for vue.js, easy to use.

Features

• Easy

  Few API, make it easy for developers to quickly develop a swiper component.

• Swift

  Just configure it on demand to get the swiper effect you want.

Install

npm install vue-banner-better -S

Usage

There are two ways to use this component. 1. register globally First register Banner and Slide component in main.js file:

import Vue from "vue";
import App from "./App";
// import swiper plugin
import Banner from "vue-banner-better";
// use plugin,it will mount Banner and slide components globally
Vue.use(Banner);

new Vue({
  el: "#root",
  render: h => h(App)
});

Then you can use them in your any .vue file:

NOTE : The direct child element of the Banner component can only be the Slide component, otherwise it will cause an error! 2. register in scoped

< Banner
  autoplay
  :indicator="indicator"
  show-navigation
  disable-on-hover
  mode="loop"

  <Slide>
    <img src="https://images.pexels.com/photos/289323/pexels-photo-289323.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  </Slide>
  <Slide>
    <img src="https://images.pexels.com/photos/70741/cereals-field-ripe-poppy-70741.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  </Slide>
  <Slide>
    <img src="https://images.pexels.com/photos/54323/rose-composites-flowers-spring-54323.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  </Slide>
</Banner>

import {Banner,Slide} from "vue-banner-better";
export default {
  data() {
    return {
       indicator: {
            clickable: true,
            type: "pill",
            showCounter: false
        }
    };
  },
  components: {
    Banner,
    Slide
  }

Of course you can also directly use the default component configuration:

<Banner indicator>
	<Slide>something</Slide>
	<Slide>something</Slide>
	<Slide>something</Slide>
</Banner>

finally open your browser ,an amazing swiper view is shown!

Api

Banner

Properties

indicator

• indicator.align:Set the horizontal position of the indicator, 'start','center'(default) or 'end'.
• indicator.type:Set indicator style,'circle','square','bar'(default) or 'pill'.
• indicator.clickable:Indicates whether the indicator can be clicked to switch the carousel,defaults to be true.
• indicator.color:Set indicator default color.
• indicator.activeColor:Set the color when the indicator is activated.
• indicator.textColor:Set the text color of the counter in the indicator, available when showCounteris true.
• indicator.activeTextColor:Set the text color when the counter in the indicator is activated, available when showCounter is true.
• indicator.showCounter:Set whether to include a counter in the indicator,default value is false.

MoreDetail

If you want to learn more about vue-banner-better, you can visit our hosting project to github

You can also git clone and execute the following command:

npm run start

to run the project, and welcome to mention issure!