Vue Js Image Slide Show

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div id="app">
        <h4>Vue js Image Slide Show</h4>

<div class="slider">
            <img :src="images[currentImageIndex]" alt="Slider Image" class="slider-image">
            <div class="controls">
                <button class="prev-btn" @click="prevImage">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <button class="next-btn" @click="nextImage">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    currentImageIndex: 0,
                    images: [
                        'https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG',
                        'https://www.sarkarinaukriexams.com/images/post/1670772103thisisengineering-raeng-yhCHx8Mc-Kc-unsplash_(1).jpg',
                        'https://www.sarkarinaukriexams.com/images/post/1673249449chnange_img_src_dynamically_(1).jpg',
                        'https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG',
                        'https://www.sarkarinaukriexams.com/images/post/1670772103thisisengineering-raeng-yhCHx8Mc-Kc-unsplash_(1).jpg',
                        'https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG'
                    ],

};
            },
            created() {
                setInterval(() => {
                    this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
                }, 5000);
            },

methods: {
                prevImage() {
                    this.currentImageIndex = (this.currentImageIndex === 0) ? this.images.length - 1 : this.currentImageIndex - 1;
                },
                nextImage() {
                    this.currentImageIndex = (this.currentImageIndex === this.images.length - 1) ? 0 : this.currentImageIndex + 1;
                }
            },
        });
        app.mount('#app');
    </script>
    <style scoped>
        .slider {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

.slider-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;

}
       .controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

.prev-btn,
        .next-btn {
            background-color: #fff;
            border: none;
            border-radius: 50%;
            color: #000;
            cursor: pointer;
            font-size: 24px;
            height: 40px;
            margin: 0 10px;
            width: 40px;
        }
        .prev-btn:hover,
        .next-btn:hover {
            background-color: #000;
            color: #fff;
        }

.prev-btn:focus,
        .next-btn:focus {
            outline: none;
        }
    </style>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div id="app">
        <h4>Vue js Image Slide Show</h4>
​
        <div class="slider">
            <img :src="images[currentImageIndex]" alt="Slider Image" class="slider-image">
            <div class="controls">
                <button class="prev-btn" @click="prevImage">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <button class="next-btn" @click="nextImage">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    currentImageIndex: 0,
                    images: [
                        'https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG',
                        'https://www.sarkarinaukriexams.com/images/post/1670772103thisisengineering-raeng-yhCHx8Mc-Kc-unsplash_(1).jpg',
                        'https://www.sarkarinaukriexams.com/images/post/1673249449chnange_img_src_dynamically_(1).jpg',
                        'https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG',
                        'https://www.sarkarinaukriexams.com/images/post/1670772103thisisengineering-raeng-yhCHx8Mc-Kc-unsplash_(1).jpg',
                        'https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG'
                    ],
​
                };
            },
            created() {
                setInterval(() => {
                    this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
                }, 5000);
            },
​
            methods: {
                prevImage() {
                    this.currentImageIndex = (this.currentImageIndex === 0) ? this.images.length - 1 : this.currentImageIndex - 1;
                },
                nextImage() {
                    this.currentImageIndex = (this.currentImageIndex === this.images.length - 1) ? 0 : this.currentImageIndex + 1;
                }
            },
        });
        app.mount('#app');
    </script>
    <style scoped>
        .slider {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }
​
        .slider-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
​
        }
       .controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
​
        .prev-btn,
        .next-btn {
            background-color: #fff;
            border: none;
            border-radius: 50%;
            color: #000;
            cursor: pointer;
            font-size: 24px;
            height: 40px;
            margin: 0 10px;
            width: 40px;
        }
        .prev-btn:hover,
        .next-btn:hover {
            background-color: #000;
            color: #fff;
        }
​
        .prev-btn:focus,
        .next-btn:focus {
            outline: none;
        }
    </style>
</body>
​
</html>