JSFiddle - React, Tailwind, and code Playground

by von

HTML

const page1 = {
    template: "#page1",
};

new Vue({
    el: "#app",
    data: function () {
        return {
            images: [],
            data: [],
            index: null,
            imagesNumber,
            checkTitle: false,
            checkDescription: false,
            optionGallery: {
                //For Show Title on Big Image
                // onslide: function(index, slide) {
                //     var node = this.container.find('.description');
                //     node.empty();
                //     node[0].innerHTML = 'Title 1';
                // }
            }
        };
    },
    watch: {
        imagesNumber: function () {
            this.data = [];
            for (let i = 0; i < this.imagesNumber; i++) {
                this.data.push({
                    title: `Title ${i + 1}`,
                    description: `Description ${i + 1}`,
                    image_url: urls[i % urls.length]
                });
            }
        },
        data: function () {
            //Set Option Beautifier HTML
            const options = {
                'indent': 'auto',
                'indent-spaces': 4,
                'wrap': 80,
                'markup': true,
                'output-xml': false,
                'numeric-entities': true,
                'quote-marks': true,
                'quote-nbsp': false,
                'show-body-only': true,
                'quote-ampersand': false,
                'break-before-br': true,
                'uppercase-tags': false,
                'uppercase-attributes': false,
                'drop-font-tags': true,
                'tidy-mark': false
            }

            //Set Images From Data
            this.images = [];
            for (let i = 0; i < this.data.length; i++) {
                this.images.push(this.data[i].image_url);
            }

            //Set Data Image to HTML
            setTimeout(function(){ 
                const source =...