<template>
    <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="" alt="Slide 3"></div>
            <div class="swiper-slide"><img src="" alt="Slide 3"></div>
            <div class="swiper-slide"><img src="" alt="Slide 3"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-bullets">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";
    import Swiper from "swiper";

    @Component
    export default class Carousel extends Vue {
        @Prop() private banners!: string;
        private swiper!: Swiper;

        private created() {
            // empty
        }

        private mounted() {
            this.swiper = new Swiper(".swiper-container", {
                loop: true, autoplay: true,
                pagination: {
                    el: '.swiper-pagination',
                },
            });
            document.querySelectorAll(".swiper-slide").forEach((element: any) => {
                let r = Math.floor(Math.random() * 256);
                let g = Math.floor(Math.random() * 256);
                let b = Math.floor(Math.random() * 256);
                element.style.background = `rgb(${r},${g},${b})`;
            });
        }

        private methods() {
            // empty
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import '../../../node_modules/swiper/dist/css/swiper.min.css';
</style>
