JSFiddle - React, Tailwind, and code Playground

by khamer

JavaScript

$(function() {
    // Function to Change Hero Info
    var i = 0;
    var heroImage = $('.hero-slide');
    var header = $('.copy');
    var secondLine = $('.second-line');
    var button = $('.hero-button');

    var changeHero = function() {
        i++;

        if (i > 2) {
            i = 0;
        }

        if (i === 0) {
            heroImage.fadeTo(500, 1);
            secondLine.addClass('second-line');
            header.removeClass('left');
            secondLine.removeClass('left');
            heroImage.css('background-image', 'url(/img/hero-one.png)');
            header.html('Introducing the newest Aston Martin');
            secondLine.html('DB11 V8 and DB11 Volante');
            heroImage.fadeTo(5500, 0);
            
        } else if (i === 1) {
            heroImage.fadeTo(500, 1)
            heroImage.css('background-image', 'url(/img/hero-two.png)');
            header.html('Now taking orders on the');
            secondLine.html('brand new DB11 Volante');
            header.addClass('right');
            secondLine.removeClass('second-line');
            secondLine.addClass('right');
            heroImage.fadeTo(5500, 0);
            
        } else if (i === 2) {
            heroImage.fadeTo(500, 1)
            header.removeClass('right');
            secondLine.removeClass('right');
            heroImage.css('background-image', 'url(/img/hero-three.png)');
            header.html('DB11 4 liter V8 twin turbo');
            secondLine.html('Now available for test drives');
            secondLine.removeClass('second-line');
            header.addClass('left');
            secondLine.addClass('left');
            button.addClass('left');
            heroImage.fadeTo(5500, 0);
        }
    };

    window.onload = function() {
        setInterval(changeHero, 7000);
    };
});