custom-banner-vue

Features:

• Optional orientation

• Optional size

• Customizable Elements order

• Transition's configuration of every element.

• Time settings.

• Optional images or texts

• Orientation

  • Two options for orientation: horizontal or vertical
  • Horizontal is the option by default.

• Size

  • Two options for size: min or medium
  • Medium is the option by default.

• Responsive

  • Two options for responsive: false or true
  • True is the option by default.
  • Only available for horizontal orientation

• Screen

  • Two options for screen: default or full
  • Full is the option by default.
  • Only available for horizontal orientation
  • The screen property with full value set responsive to true value automatically.

• Order

  • The order or sequence allows handling which element will perform animations and possiblity of add new animations.

• Transitions

  • Six differents transitions:

    • width,height,left,top,rotate,opacity.

  • Opacity provide perform together anyone of the others at time.

• Time

  • Configuration of time between one animation and the next.

• Images/Texts

  • Possibility of texts improving performance.

Install

npm install custom-banner-vue

Import globally

import CustomBannerVue from 'custom-banner-vue'

Vue.use(CustomBannerVue)

Import locally

import { CustomBannerVue } from 'custom-banner-vue'

• Configuration

Template

<template>
    <div>
	<custom-banner-vue :options="options"></custom-banner-vue>
    </div>
</template>

Basic

...
data() {
  return {
    options:{
      orientation:"horizontal",
      time:5,
      images:[
      //folder public
        [
          "img/image1.jpg",
          "img/image2.jpg",
          "img/image3.jpg"
        ],
      //folder assets  
        [
          require("@/assets/img/image1.jpg"),
          require("@/assets/img/image2.jpg"),
          require("@/assets/img/image3.png")
        ],
      //absolute path
        [
          "http://www.server/image1.jpg",
          "http://www.server/image2.jpg",
          "http://www.server/image3.jpg"
        ]
      ],
    }	
  }
},
....

Basic (texts)

...
options:{
  orientation:"vertical",
  texts:[
    [
      "Regístrese ahora y obtendrá",
      "un cupón de descuento de 5€",
      "en su próxima compra"
    ],
    [
      "Si desea más información",
      "póngase en contacto con uno",
      "de nuestro asesores llamando al 606060606"
    ],
    [
      "Welcome to mydomain.com",
      "browse the different sections"
    ]
  ],
  effects:{
    1:{
      modeText:true	
    },
    2:{
      modeText:true
    },
    3:{
      modeText:true
    }
  }
}
...

Order && Effects

...
options:{
  orientation:"vertical",
  size:"min",
    images:[
      [
        "img/image1.jpg",
        "img/image2.jpg",
        "img/image3.jpg"
      ],
      [
        "img/image1.png",
        "img/image2.png",
        "img/image3.png"
      ],
      [
        "http://www.server/image1.jpg",
        "http://www.server/image2.jpg",
        "http://www.server/image3.jpg"
      ]
  ],
  effects:{
    1:{
      opacity:true,
      width:true,
    },
    2:{
      top:true
    },
    3:{
      rotate:true
    }
  },
  order:{
    0:[1,3],
    1:[2],
    2:[3],
    3:[1,2,3]
    ...
    ...
  }
},
...

Images and texts

options:{
  orientation:"vertical",
  size:"min",
  responsive:true,
  screen:'full',
  images:[
    [    
      "img/image1.jpg",
      "img/image2.jpg",
      "img/image3.jpg"
    ],
    [
      "img/image1.png",
      "img/image2.png",
      "img/image3.png"
    ],
    [
      "http://www.server/image1.jpg",
      "http://www.server/image2.jpg",
      "http://www.server/image3.jpg"
    ]
  ],
  texts:[
    [
      "Welcome to mydomain.com",
      "browse the different sections"     
    ],
    [],
    []    
  ],
  effects:{
    1:{
      opacity:true,
      width:true,
      modeText:true
    },
    2:{
      left:true	    
    },
    3:{
      opacity:true
    }
  },        
},
...

Other options

• widthHTML
  • The widthHTML property allows assign attribute width of image, can be useful some times for to reduce the image or keep dimensions to width effect.

...
effects:{
  1:{
    opacity:true,
    width:true,
    widthHTML:120,
  },
  2:{
    left:true
    modeText:true,
  },
  3:{
    opacity:true
  }
},     
...

• fontSizeStyle
  • The fontSizeStyle property allows assign one different size of font for every element. The text's option set the size of first text of the list by default, so handling fontSizeStyle can be really useful.

...
effects:{
  1:{
    opacity:true,
    width:true,
  },
  2:{
    left:true
    modeText:true,
    fontSizeStyle:"20px",
  },
  3:{
    opacity:true
  }
}
...

License

custom-banner-vue is released under MIT license