<!-- head -->
<script src="https://unpkg.com/@bananin/bgaleria@latest/js/b-galeria.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@bananin/bgaleria@latest/css/b-galeria.css" />

<!-- 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="https://www.youtube.com/iframe_api"></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.$refs.gal.show(e)">
            <img v-if="i.t=='v'" :src="'https://img.youtube.com/vi/'+i.s+'/0.jpg'" class="img-gal" @click="this.$refs.gal.show(e)">
        </div>
    </div>
</div>

const app = Vue.createApp({
    components: {
        "b-galeria": bGaleria
    },
    data() {
        return {
            images:[
                {s:"img/cara.png",t:"i"},
                {s:"img/cara.png",t:"i"},
                {s:"img/cara.png",t:"i"},
                {s:"DJgzyQX-yZQ",t:"v"}//id de youtube
            ]
        };
    }
}).mount("#app");

.img-gal{
    max-height: 180px;
    border: solid 2px;
    padding: 8px;
    width: 100%;
    object-fit: contain;
    border-radius: 15px;
    cursor: pointer;
}

Options:

• 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-"

Methods:

• 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