How to Add Two Home Page Banner Text That should display alternatively

How to Add Two Home Page Banner Text That should display alternatively
for this i have created a new extension and u can add the code with out new extension u need to make sure using extension have all the entry point and the view is extended in extension.
JS File:

define(
	'JJ.BannerTextUpdate.BannerTextUpdate'
,   [
		'Header.View'
	]
,   function (
		HeaderView
	)
{
	'use strict';

	return  {
		mountToApp: function mountToApp (container)
		{
			_.extend(HeaderView.prototype, {
				getContext: _.wrap(HeaderView.prototype.getContext, function (fn) {
					let originalRet = fn.apply(this, _.toArray(arguments).slice(1));
					try {
						$(document).ready(function() {
							let bannerFirstText = $(".header-top-content1");
							let bannersecondText = $(".header-top-content2");
							let bannerContent = -1;
							function showNextQuote() {
								++bannerContent;
								if (bannerContent % 2 === 0) {
									bannerFirstText.fadeTo(500, 0).delay(2000).fadeTo(500, 1, showNextQuote);
								} else {
									bannersecondText.fadeTo(500, 0).delay(2000).fadeTo(500, 1, showNextQuote);
								}
							}
							showNextQuote();
						});
						let homePageBannerFisrtText = SC.CONFIGURATION.HomePagePersonalization.HomepageBannerFirstText;	
						originalRet.homePageBannerFisrtText = homePageBannerFisrtText;
						let homePageBannerSecondText = SC.CONFIGURATION.HomePagePersonalization.HomepageBannerSecondText;	
						originalRet.homePageBannerSecondText = homePageBannerSecondText;
						return originalRet;
					} catch (e) {
						console.error('Error @ HomeBanner text', e);
					}
					return originalRet;
				})
			});
		}
	};
});

Configuration :

{
    "type": "object",
    "group": {
        "id": "BannerText",
        "title": "BannerText",
        "description": "Banner Text update"
    },
    "subtab": {
        "id": "HomeBannerText",
        "title": "HomeBannerText",
        "description": "Banner Text update",
        "group": "homepage"
    },
    "properties": { 
        "HomePagePersonalization.HomepageBannerFirstText": {
            "group": "BannerText",
            "subtab": "HomeBannerText",
            "type": "string",
            "title": "Home page Banner First Text",
            "description": "Home page Banner Text Section"
        },
        "HomePagePersonalization.HomepageBannerSecondText": {
            "group": "BannerText",
            "subtab": "HomeBannerText",
            "type": "string",
            "title": "Home page Banner Second Text",
            "description": "Home page Banner Text Section"
        }
    }
}

theme Cass and Tpl

<div class="header-main-wrapper">
	<div class="header-top-content"> 
        <div class="header-top-content1">{{{homePageBannerFisrtText}}}</div>
        <div class="header-top-content2">{{{homePageBannerSecondText}}}</div> 
	</div> 

.header-top-content1 {
		color: $navbar-inverse-link-hover-color;
		background-color: $sc-color-secondary;
		opacity: 0;
		position: absolute;
		width: 100%;
		font-size: 15px;
		letter-spacing: 2px;
		font-family: 'Gilroy-medium';
	}
	.header-top-content2 {
		color: $navbar-inverse-link-hover-color;
		background-color: #D62598;
		font-weight: bold;
		opacity: 0;
		position: absolute;
		width: 100%;
		font-size: 15px;
		letter-spacing: 2px;
		font-family: 'Gilroy-medium';
	}
	.header-top-content {
		position: relative;
	}