JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<div class="slider-wrapper">

    <div class="swiper-slides swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(slide, index) in slides" v-bind:key="index">
                <div class="swiper-box">
                    <h3 class="slide-title">{{ slide.title }}</h3>
                    <p class="slide-text">{{ slide.text }}</p>
                    <p class="slide-btn"><a :href="slide.link" class="btn">Hier Wohnung finden</a></p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="swiper-backgrounds swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(slide, index) in slides" v-bind:key="index" :style="background(unsplash(slide.image))"></div>
        </div>
    </div>

</div>

SCSS

body {
    margin: 0;
}

*, ::before, ::after {
   box-sizing: border-box;
}

.slider-wrapper {
    position: relative;
    z-index: 0;
}

.swiper-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.swiper-wrapper {
    align-items: stretch;
}

.swiper-slide {
    height: auto;
    display: flex;
    background-size: cover;
    background-position: 50% 50%;
}

.swiper-box {
    position: relative;
    margin: 6vw 3vw;
    padding: 3vw;
    text-align: center;
    color: #fff;
    z-index: 0;
    display: flex;
    flex-direction: column;
    
    &::before,
    &::after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    &::before {
        border: 2px solid #fff;
        opacity: 1;
    }
    
    &::after {
        background: linear-gradient(45deg, #03B5C3, #94C247);
        opacity: 0;
    }
}

.swiper-box::before,
.swiper-box::after,
.slide-title,
.slide-text,
.slide-btn {
    transition: all 0.3s;
}

.slide-title,
.slide-text {
    transform: translateY(30px);
}

.slide-text,
.slide-btn {
    visibility: hidden;
    opacity: 0;
}

.slide-title {
    transform: translateY(6vh) scale(1.2);
    font-size: 24px;
    margin: 0;
}

.slide-btn {
    transform: scale(0.8);
    margin: auto 0 0;
}

.swiper-slide-active {    
    
    .swiper-box::before {
        opacity: 0;
    }
    
    .swiper-box::after {
        opacity: 1;
    }

    .slide-title {
        transform: translateY(0) scale(1);
        font-size: 18px;
    }

    .slide-text {
        transition-delay: 0.2s;
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }

    .slide-btn {
        transition-delay: 0.3s;
        transform: scale(1);
        visibility: visible;
        opacity: 1;
    }
}

.btn {
    background: linear-gradient(225deg, #EA5297, #9A6FAE);
    border-radius: 3px;
   ...

JavaScript

new Vue({
    el: '.slider-wrapper',
    data: {
        slides: [
            {
                image: 'WLUHO9A_xik',
                title: 'Lorem ipsum dolor',
                text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
                link: '#',
            },
            {
                image: 'AMTESrXEods',
                title: 'Nullam dictum felis',
                text: 'Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.',
                link: '#',
            },
            {
                image: '2IxFEFf06l8',
                title: 'Aliquam lorem ante',
                text: 'Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.',
                link: '#',
            },
            {
            	image: 'OLFi6hzbwk0',
                title: 'Etiam rhoncus',
                text: 'Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.',
                link: '#',
            },
            {
            	image: 'nt-8J52nJnw',
                title: 'Sed consequat',
                text: 'Leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.',
                link: '#',
            },
        ]
    },
	mounted: function(){
        
        var...