JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<div class="container">
    <div class="inner_box">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
    </div>
    <div class="right_arrow">&rarr;</div>
    <div class="left_arrow">&larr;</div>
</div>

CSS

.container {
    position:relative;
}
li {
    width: 200px;
    height: 200px;
    background-color:darkgrey;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
}
ul {
    padding: 0;
    margin: 0;
}
.inner_box {
    width: 200px;
    height: 200px;
}

JavaScript

$('li:first-child').siblings().hide();


  $('.right_arrow').click(function () {
      // Check for the active li..
      // If length is zero.. set the first one to active
      var $active = $('li.active'),
          $this = $(this),
          $container = $this.closest('.container');
      var $li = $active.length ? $active : $('li:first-child');

      $li.fadeOut(200, function () {
          var $curr = $li.next('li').length ? $li.next('li') : $('li:first-child');
          $curr.fadeIn(200).addClass('active');
          $curr.siblings().removeClass('active');
      });
  });

  $('.left_arrow').click(function () {
       // Check for the active li..
      // If length is zero.. set the first one to active
      var $active = $('li.active'),
          $this = $(this),
          $container = $this.closest('.container');
      var $li = $active.length ? $active : $('li:last-child');

      $li.fadeOut(200, function () {
          var $curr = $li.prev('li').length ? $li.prev('li') : $('li:last-child');
          $curr.fadeIn(200).addClass('active');
          $curr.siblings().removeClass('active');
      });
  });