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

| Name | Type | Default | Description | | :--------------: | :----------------: | :------- | :--------------------------------------------------------- | | width | string | 800px | wrapper width | | height | string | 400px | wrapper height | | bordered | Boolean | false | if true,the Banner component have 1px outline | | interval | Number | "3000" | Set the rotation interval of swiper in milliseconds | | autoplay | Boolean | true | Set whether swiper automatically rotates | | mode | String | 'loop' | Set the carousel mode, loopor alternate | | indicator | ObjectorBoolean | false | See the indicator description below | | show-navigation | Boolean | true | Whether to display navigation | | disable-on-hover | Boolean | true | Whether to disable the swiper when setting the mouse hover |

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 showCounter is 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!