JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<div id="sliderButtonB" onclick="pageSliderBack()">Go back</div>
<div id='slidecarousel' class='p1' onclick='pageSlider(this)'>This is the carousel</div>

CSS

#slidecarousel {
    height: 100;
}

.p1 {
    background-color: red;
}

.p2 {
    background-color: orange;
}
.p3 {
    background-color: yellow;
}
.p4 {
    background-color: green;
}
.p5 {
    background-color: blue;
}

.slideErr {
    background-color: white;
}

JavaScript

function pageSliderBack(elem)
{
    var pDiv = $('#slidecarousel')
    if ( pDiv.attr("class").match(/(?:^|\s)p1(?!\S)/) ){
         pDiv[0].className = "p5";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p2(?!\S)/) ){
                pDiv[0].className = "p1";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p3(?!\S)/) ){
                pDiv[0].className = "p2";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p4(?!\S)/) ){
                pDiv[0].className = "p3";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p5(?!\S)/) ){
                pDiv[0].className = "p4";
    } else {
    pDiv[0].className = "SlideErr";
    }
}

function pageSlider(elem)
{
    if ( elem.className.match(/(?:^|\s)p1(?!\S)/) ){
         elem.className = "p2";
    } else if ( elem.className.match(/(?:^|\s)p2(?!\S)/) ){
                elem.className = "p3";
    } else if ( elem.className.match(/(?:^|\s)p3(?!\S)/) ){
                elem.className = "p4";
    } else if ( elem.className.match(/(?:^|\s)p4(?!\S)/) ){
                elem.className = "p5";
    } else if ( elem.className.match(/(?:^|\s)p5(?!\S)/) ){
                elem.className = "p1";
    } else {
    elem.className = "SlideErr";
    }
}