JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/[email protected]/js/swiper.min.js"></script>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<div class="typed-slider">

    <div class="typewriter">

        <div class="typed-title">Wir sind</div>
        <div class="typed-stage">|</div>     
        <!--div class="typed-footer">
            <a class="typed-button" href="#">Button</a>
        </div-->        

        <div class="typed-strings">
            <div class="typed-string" data-img="//source.unsplash.com/2MuZ23gkFKo/800x450" data-url="#1">Handwerker</div>
            <div class="typed-string" data-img="//source.unsplash.com/BHNxfaeNCTI/800x450" data-url="#2">Künstler</div>
            <div class="typed-string" data-img="//source.unsplash.com/1qYH8t8Q5mE/800x450" data-url="#3">Begleiter</div>
            <div class="typed-string" data-img="//source.unsplash.com/T9SwaYf6g40/800x450" data-url="#4">Gärtner</div>
            <div class="typed-string" data-img="//source.unsplash.com/GX8KBbVmC6c/800x450" data-url="#5">Erzieher</div>
        </div>
        
    </div>

    <div class="swiper-container">
        <div class="swiper-wrapper"></div>
    </div>
    
</div>

SCSS

.typed-slider {
    position: relative;
    color: #fff;
    
    .typewriter {
        position: relative;
        font-size: 2rem;
        font-weight: 900;
        text-align: center;
        padding: 5rem 2rem;
        z-index: 5;
    }

    .typed-string {
        display: none;
    }

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

    .swiper-slide {
        background-size: cover;
    }
}

JavaScript

var typedSlider = document.querySelectorAll('.typed-slider');

for( var ts = 0; ts < typedSlider.length; ts++ ) {

	var container = typedSlider[ts],
    	writerContainer = container.querySelector('.typed-stage'),
    	sliderContainer = container.querySelector('.swiper-container'),
    	buttonElement = container.querySelector('.typed-button'),
    	strings = container.querySelectorAll('.typed-string');  

    var slider = new Swiper(sliderContainer, {
        loop: true,
    	effect: 'fade',
        speed: 1000,
    });
        
    var writer = new Typewriter(writerContainer, {
        loop: true,
        delay: 100,
    });
    
    for( var s = 0; s < strings.length; s++ ) {
    
    	var string = strings[s],
            dataset = string.dataset,
           	text = string.innerHTML,
           	image = dataset.img,
           	url = dataset.url;
        
        writer
        	.callFunction(function(){
                
       			// buttonElement.setAttribute('href', url);
                // console.log(url);
                
            })
            .pauseFor(300)
            .typeString(text)
            .pauseFor(3000)    
            .deleteAll()
            .callFunction(function(){
            	slider.slideNext();
            });
           
            
        
        slider.addSlide(s, '<div class="swiper-slide" style="background-image:url(' + image + ')"></div>');
    
    }
    
    writer.start();

}