@bananin/bgaleria NPM

Galería

Bananin's Gallery

Install

In head tag

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

Setting

Inside Html body:

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

Javascript code:

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"}//youtube id
            ]
        };
    }
}).mount("#app");

#Options:

img: the items that are used for the gallery It consists of an array with objects {s:"resource path",w:"resource path with 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

Example in Galería con Bananin