JSFiddle - React, Tailwind, and code Playground

by wapster92

HTML

<div class="online">	
				<a  onclick="previousSlide()" class="left"><img src="https://img.icons8.com/metro/26/000000/double-left.png"/></a>
				<div class="lenta">
						<a href="" id="live1" class="livebox1" style="grid-column: 1 / 2; grid-row: 1 / 2;">
							<div class="text textMedium textS textColorBlack"><span>Товар 1</span></div>
							<div class="text textMedium textS textColorBlack"><span>50 Р</span></div>
						</a>
						<a href="" id="live2" class="livebox2" style="grid-column: 2 / 3; grid-row: 1 / 2;">
							<div class="text textMedium textS textColorBlack"><span>Товар 2</span></div>
							<div class="text textMedium textS textColorBlack"><span>50 Р</span></div>
						</a>
						<a href="" id="live3" class="livebox3" style="grid-column: 3 / 4; grid-row: 1 / 2;">
							<div class="text textMedium textS textColorBlack"><span>Товар 3</span></div>
							<div class="text textMedium textS textColorBlack"><span>50 Р</span></div>
						</a>
						<a href="" id="live4" class="livebox4" style="grid-column: 4 / 5; grid-row: 1 / 2;">
							<div class="text textMedium textS textColorBlack"><span>Товар 4</span></div>
							<div class="text textMedium textS textColorBlack"><span>50 Р</span></div>
						</a>
						<a href="" id="live5" class="livebox5" style="grid-column: 5 / 6; grid-row: 1 / 2;">
							<div class="text textMedium textS textColorBlack"><span>Товар 5</span></div>
							<div class="text textMedium textS textColorBlack"><span>50 Р</span></div>
						</a>
						<a href="" id="live6" class="livebox6" style="grid-column: 6 / 7; grid-row: 1 / 2; display: none;">
							<div class="text textMedium textS textColorBlack"><span>Товар 6</span></div>
							<div class="text textMedium textS textColorBlack"><span>50 Р</span></div>
						</a>
						<a href="" id="live7" class="livebox7" style="grid-column: 7 / 8; grid-row: 1 / 2; display: none;">
							<div class="text textMedium textS textColorBlack"><span>Товар 7</span></div>
							<div class="text...

CSS

.online{
	display: grid;
	grid: 25rem / 1.5rem 1fr 1.5rem;
	grid-column: 2/3;
	grid-row: 5/6;
	z-index: 1;
}

.lenta {
	display: grid;
	grid-row: 1/2;
	grid-column: 2/3;
}
.livebox1 {
	width: 90%;
    height: 95%;
    box-shadow:  0 0 5px black;
    background: url(../ph/origin/Battlefield1.png);
    background-size: cover;
    margin: 1rem 0.5rem 1rem ;
    border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.5rem;
}

.livebox2 {
	width: 90%;
    height: 95%;
    box-shadow:  0 0 5px black;
    background: url(../ph/origin/Battlefield1deluxe.png);
    margin: 1rem 0.5rem 1rem ;
    border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.5rem;
	background-size: cover;
}

.livebox3 {
	width: 90%;
    height: 95%;
    box-shadow:  0 0 5px black;
    background: url(../ph/origin/Battlefield1ultimate.png);
    margin: 1rem 0.5rem 1rem ;
    border-radius: 1.5rem;
	display: flex;
	background-size: cover;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.5rem;
}

.livebox4 {
	width: 90%;
    height: 95%;
    box-shadow:  0 0 5px black;
    background: url(../ph/origin/Battlefield4.png);
    background-size: cover;
    margin: 1rem 0.5rem 1rem ;
    border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.5rem;
}

.livebox5 {
	width: 90%;
    height: 95%;
    box-shadow:  0 0 5px black;
    background: url(../ph/origin/Battlefield4premium.png);
    background-size: cover;
    margin: 1rem 0.5rem 1rem ;
    border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.5rem;
}

.livebox6 {
	width: 90%;
    height: 95%;
    box-shadow:  0 0 5px black;
    background: url(../ph/origin/Battlefield5.png);
    background-size: cover;
    margin: 1rem...

JavaScript

function nextSlide() {
    for (let i = 1; i <= 10; i++) {
        let live = document.querySelector('#live' + String(i));
        switch (live.style.gridColumn) {
            case '1 / 2':
                live.style.display = 'none';
                live.style.gridColumn = '10 / 11';
                break;
            case '2 / 3':
                live.style.display = 'flex';
                live.style.gridColumn = '1 / 2';
                break;
            case '3 / 4':
                live.style.display = 'flex';
                live.style.gridColumn = '2 / 3';
                break;
            case '4 / 5':
                live.style.display = 'flex';
                live.style.gridColumn = '3 / 4';
                break;
            case '5 / 6':
                live.style.display = 'flex';
                live.style.gridColumn = '4 / 5';
                break;
            case '6 / 7':
                live.style.display = 'flex';
                live.style.gridColumn = '5 / 6';
                break;
            case '7 / 8':
                live.style.display = 'none';
                live.style.gridColumn = '6 / 7';
                break;
            case '8 / 9':
                live.style.display = 'none';
                live.style.gridColumn = '7 / 8';
                break;
            case '9 / 10':
                live.style.display = 'none';
                live.style.gridColumn = '8 / 9';
                break;
            case '10 / 11':
                live.style.display = 'none';
                live.style.gridColumn = '9 / 10';
                break;

        }
    }
}


function previousSlide() {
    for (let i = 10; i >= 1; i--) {
        let live = document.querySelector('#live' + String(i));
        switch (live.style.gridColumn) {
            case '1 / 2':
                live.style.display = 'flex';
                live.style.gridColumn = '2 / 3';
                break;
            case '2 / 3':
                live.style.display =...