<div class="swiper-container">
    <div class="swiper-wrapper">
        {{ range .Site.Data.slide }}
        <div class="swiper-slide">
            {{ with .image }}
                <img src="{{ . }}">
            {{ end }}
            {{ with .video }}
                <video class="slide-video" src="{{ . }}" autoplay loop></video>
                <style>
                    .slide-video {
                        height: calc(100vh - 120px);
                        width: 100vw;
                        object-fit: cover;
                    }
                </style>
            {{ end }}
            <div class="s-fade-txt">
                <h1 class="text-4xl {{ or .color "text-white" }}">{{ .title }}</h1>
            </div>
        </div>
        {{ end }}
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
