Custom Banner Vue es un banner rotatorio de elementos, creado en lenguaje JavaScript, con distintas opciones de personalización y diseñado para el framework VueJS. Custom Banner es fácil y rápido de instalar mediante el gestor de paquetes npm y se compone de 3 elementos (imágenes o cadenas de texto). Este plugin ofrece una opción sencilla de implementar y adaptar en cualquier proyecto creado con VueJS con distintas opciones de configuración detalladas a continuación. 

Instalación

npm install custom-banner-vue

Importar globalmente (main.js o similar)

import CustomBannerVue from 'custom-banner-vue';
Vue.use(CustomBannerVue);

 Importar localmente (componente)

import { CustomBannerVue } from 'custom-banner-vue';
...
export default {
...
    components: {
        CustomBannerVue,
    }
}

Añadir componente en el template

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

Opciones de Configuración

• Orientación

2 opciones de orientación: horizontal y vertical. Horizontal es la opción establecida por defecto.

• Dimensiones

2 opciones: min o medium. Medium es la opción establecida por defecto. 

• Orden de animaciones

Permite establecer la cantidad de animaciones y la combinación de elementos que realizan la rotación.

• Transiciones

6 posibles transiciones:

width, height, top, left, rotate y opacity. La transición de opacidad es posible establecerla simultáneamente con cualquiera de las otras.

• Tiempo

Tiempo establecido entre cada transición.

• Imágenes y textos

3 opciones de enlace de imágenes:

1. externa: ruta absoluta
2. assets
3. public

Ejemplo básico con imágenes

...
data() {
  return {
    options:{
      orientation:"horizontal",
      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"
        ]
      ],
    }	
  }
},
....

Ejemplo básico con textos 

...
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
    }
  }
}
...

Nota: Para activar los textos es necesario establecer el valor de la opción modeText a true  en cada elemento.

Ejemplo de configuración de orden y transiciones

...
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]
    ...
    ...
  }
},
...

Ejemplo de imágenes y textos

...
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"
    ]
  ],
  texts:[
    [
      "Welcome to mydomain.com",
      "browse the different sections"     
    ],
    [],
    []    
  ],
  effects:{
    1:{
      opacity:true,
      width:true,
      modeText:true
    },
    2:{
      left:true	    
    },
    3:{
      opacity:true
    }
  },        
},
...

Otras opciones de configuración

widthHTML: La opción widthHTML permite establecer un ancho fijo de las imágenes de cada elemento

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

fontSizeStyle: La opción fontSizeStyle permite asignar un tamaño  de texto fijo de los textos de cada elemento.

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

Este plugin permite establecer múltiples banners en un mismo componente, tan solo será necesario cambiar el nombre del objeto.

<custom-banner-vue :options="options"></custom-banner-vue>
....
<custom-banner-vue :options="options2"></custom-banner-vue>
...
<custom-banner-vue :options="options3"></custom-banner-vue>

CSS

Es  posible modificar los estilos mediante las clases bh_banner, div_banner,  img_banner apoyándose en la declaración !important.

Nota: Este plugin se encuentra todavía en fase beta, si encuentra algún error o mejora puede comunicarse con el autor mediante la sección de contacto, en la parte superior de este blog. 

Puede acceder desde aquí a la publicación en  npmjs.com.