Bananin's Gallery

<!-- head -->
<script src=""></script>
<link type="text/css" rel="stylesheet" href="" />

<!-- If you include youtube videos you will need to include the api so that it does not remain playing when you close it -->
<script src=""></script>
<div class="my-5" id="app">
    <b-galeria :img="images" ref="gal" id="gal"></b-galeria>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
        <div class="col" v-for="(i,e) in images">
            <img v-if="i.t=='i'" :src="i.s" class="img-gal" @click="this.$">
            <img v-if="i.t=='v'" :src="''+i.s+'/0.jpg'" class="img-gal" @click="this.$">
const app = Vue.createApp({
    components: {
        "b-galeria": bGaleria
    data() {
        return {
                {s:"DJgzyQX-yZQ",t:"v"}//id de youtube
    max-height: 180px;
    border: solid 2px;
    padding: 8px;
    width: 100%;
    object-fit: contain;
    border-radius: 15px;
    cursor: pointer;


  • img: the items that are used for the gallery
    • It consists of an array with objects [{s:"resource path",w:"resource path in webp",t:"resource type: i=image, v=video"}]
  • ref: reference you will have to call the component from Vue
  • Interval: time it takes to pass each image automatically
  • Id: id que se asignará a la galería prefijo: "gal-"


  • show(x=0): shows the gallery, x is optional and indicates which image should start to show..
  • hide(): hide the gallery
  • goTo(slide): move the gallery to the given position

If you like it or want to try it visit the code at npmjs

Copyright © 2024 bananin.
Todos los Derechos Reservados.
Iniciar sesión | Términos y Condiciones

Desarrollado por: Bananin!!

Instala nuestra App. ¡Es gratis!