JSFiddle - React, Tailwind, and code Playground

by eapo

HTML

<div id="tips-navbar">
    <ul class="slides">
      <li id="the-best-mashed-potatoes" class="selected">
        <div class="st-label">The Best Mashed Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="fully-loaded-mashed-potatoes">
        <div class="st-label">Fully Loaded Mashed Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="perfect-mashed-sweet-potatoes">
        <div class="st-label">Perfect Mashed Sweet Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="how-to-make-mash-tinis">
        <div class="st-label">How to Make Mash-tinis</div>
        <div class="underline"></div>
      </li>
      <li id="simple-smashed-potatoes">
        <div class="st-label">Simple Smashed Potatoes</div>
        <div class="underline"></div>
      </li>
    </ul>
  </div>

    
        <a class="st-brownBg st-left-m">
            <div class="st-arrowVideoBack">back</div>
        </a>

        <a class="st-brownBg  st-right-m">
            <div class="st-arrowVideoNext">next</div>
        </a>

CSS

#tips-navbar {
    overflow: hidden;  
    position: absolute;
}
ul.slides > li {
    display: inline-block;
    width: 100%;
    float: left;
}
.st-right-m{
    right: 1em;
}
.st-left-m{
    left: 1em;
}
.st-brownBg {
    display: block;
    position:absolute;
    top: 0;
    padding: 1em;
    border: 1px solid;
}

JavaScript

$(function vNext(){
        $( ".st-right-m" ).click(function() {
            $( "#tips-navbar ul" ).animate({
                marginLeft: "-=431"
            }, 500);
            $( ".st-left-m" ).css('display','block');
            if($('.st-right-m'.click() >= 4)){
                $('.st-right-m').hide()
            }
        });
    });

    $(function vPrev(){
        $( ".st-left-m" ).click(function() {
            $( "#tips-navbar ul" ).animate({
                marginLeft: "+=431"
            }, 500);
            if($($this).parents('.slides').css('marginLeft' === 0 + 'px')){
                $(this).hide();
            }
        });

    });