JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<template>
    <section class="Slider w-100 position-relative">
        <div class="Slider__container w-100 h-100 position-relative">
            <transition-group name="fade">
                <div v-for="(item, index) in items" v-show="currentItem === index" :key="item.id" class="Slider__slide flex justify-content-start align-items-center position-absolute w-100 h-100 lazyload" :style="{ backgroundImage: `url('${item.attributes.cover}')` }">
                    <div class="container position-relative">
                        <h2 class="text-h2 font-regular text-white text-shadow-1">
                            {{ item.attributes.description }}
                        </h2>
                        <h1 class="text-h1 font-bold text-white text-shadow-1">
                            {{ item.attributes.title }}
                        </h1>
                    </div>
                </div>
            </transition-group>
        </div>
        <transition name="fade">
            <div v-show="showScrollDown" class="Slider__scroll-down text-center">
                <span class="text-white font-regular">{{ $t('general.scrollDown') }}</span>
                <div class="Slider__scroll-down__arrows d-flex flex-column">
                    <i class="wiz wiz-arrow-down text-white"></i>
                </div>
            </div>
        </transition>
        <div v-if="items.length > 0" class="Slider__controls position-absolute d-flex flex-column" :style="{ right: containerMargin + 'px' }">
            <button v-for="(item, index) in items" :key="item.id" class="Slider__controls__button border-0 bg-transparent p-0 mb-2 outline:none" @click="goTo(index)">
                <img class="Slider__controls__image outline:none" :class="{ 'Slider__controls__image--active': currentItem === index }" :src="currentItem === index ? '/img/crystal-blue-active.svg' : '/img/crystal-blue.svg'" />
            </button>
        </div>
    </section>
</template>