JSFiddle - React, Tailwind, and code Playground

by khamer

JavaScript

$(function() {
    // Function to Change Hero Info
    var i = 0;
    var heroSlide = $('.hero-slide');
    var heroCopy = $('.copy');
    var secondLine = $('.second-line');
    
    var slides = [
    	{
        	class: 'slide-one',
        	image: '/img/hero-one.png',
            heroCopy: 'Introducing the newest Aston Martin',
            secondLine: 'DB11 V8 and DB11 Volante',
        },
        {
        	class: 'slide-two',
        	image: '/img/hero-two.png',
            heroCopy: 'Now taking orders on the',
            secondLine: 'brand new DB11 Volante',
        },
        {
        	class: 'slide-three',
        	image: '/img/hero-three.png',
            heroCopy: 'DB11 4 liter V8 twin turbo',
            secondLine: 'Now available for test drives',
        },
    ];

    var changeHero = function() {
    	i = i > slides.length ? 0 : i + 1;
        var slide = slides[i];
        
        heroSlide.css('background-image', slide.image)
        	.attr('class', 'hero hero-slide ' + slide.class)
        	.fadeTo(500, 1)
            .fadeTo(5500, 0);
        heroCopy.html(slide.heroCopy);
        secondLine.html(slide.secondLine);
    };

    setInterval(changeHero, 7000);
});