JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<!-- ul.cm>li{$$}*8 -->
<div class="cmWrap">
  <ul class="cm" data-slides="26" data-update="7" data-rotation="0" data-active="1" data-index="1">
    <li class="active"><span>01</span></li>
    <li><span>02</span></li>
    <li><span>03</span></li>
    <li><span>04</span></li>
    <li><span>05</span></li>
    <li><span>06</span></li>
    <li><span>07</span></li>
    <li><span>08</span></li>
  </ul>
</div>

SCSS

$Brdr: #7d868c;
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  &:before,&:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
%notaList{
	margin: 0;
	padding: 0;
	list-style: none;
}
%circle{
  border-radius: 50%;
}

$node: 8;
$s: 80px;
$rotation: 0;

.cmWrap{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
}
.cm{
  left: 0;
  right: 0;
  top: 50%;
  width: $s;
  height: $s;
  margin: auto;
  display: block;
  position: absolute;
  transition: transform 0.8s ease-out;
  transform: rotate(#{$rotation}deg);
  @extend %notaList;
  background: rgba(#000, 0.5);
  border-radius: 50%;
  &:before{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    color: #09F;
    padding: 30px;
    display:block;
    content: attr(data-update);
  }
  li{
    left: 0;
    top:-($s*2 - ($s/2));
    color:#333;
    width:90%;
    height: 90%;
    display: block;
    background: #CCC;
    overflow: hidden;
    position: absolute;
    transition: border 0.8s ease-out;
    border: transparent 5px solid;
    margin-bottom: ($s*2 - ($s/2));
    @extend %circle;
    & > span{
      display: block;
      padding: 36%;
      text-align: center;
      transition: transform 0.8s ease-out;
    }
    @for $i from 1 through $node{
      &:nth-child(#{$i}n) {
        transform-origin: 50% ($s*2);
        transform: rotate(($i - 1) * 360deg/$node);
        & > span {
          transform:rotate(($rotation * -1) - (($i - 1) * 360deg/$node));//outerDeg - elemDeg
        }
      }
    }
    &.active{
      border-color: rgba(#09F, 0.5);
    }
  }
}

JavaScript

var i = 1,
  nodes = 8,
  angle = 360 / nodes,
  items = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
  slideDelay = 2000;
var autoSlideTimer;

var rotateRight = function() {
		i = (i >= nodes) ? 0 : i;
    $('.cm').attr('data-index', i+1);
    dynamicSlidesLoader('.cm', i, i*angle);
    //rotator(rotation);
    i = (i >= nodes) ? 0 : i + 1;
  },
  rotateLeft = function() {
		i = parseInt($('.cm').attr('data-index'))-1;// : i-1;
    i = (i<0)? nodes: i;
    //i = (i >= nodes) ? 0 : i;
    $('.cm').attr('data-index', i);
    dynamicSlidesLoader('.cm', i, (i*angle));
    //rotator(rotation);
    //i = (i <= nodes && i <= 0) ? 1 : i + 1;
    $('.cm').attr('data-index', i);
  },
  sliderDat = function(selector, element, items) {
    $(selector).each(function(i) {
      $($(selector)[i]).find(element).text(items[i]);
    });
  },
  rotator = function(rotation) {
  	rotation = Math.round(rotation/angle) * angle;
    $('.cm').css({
      'transform': 'rotate(' + rotation + 'deg)'
    }).attr('data-rotation', rotation);
    //console.log('rotation: ' + rotation, $('.cm').attr('data-rotation'))
    $('.cm li').each(function(node) {
      r = node * angle;
      $($('.cm li')[node]).find('span').css({
        'transform': 'rotate(' + ((rotation * -1) - r) + 'deg)'
      }).parent().attr('data-rotation', ((rotation * -1) - r));
    });
  },
  dynamicSlidesLoader = function(ob, i, rotation) {
    var update = parseInt($(ob).attr('data-update')),
      slides = items.length || parseInt($(ob).attr('data-slides')),
      li = 6,
      loadingSelector = ob + ' li:nth-child(' + li + ')';
    li = (nodes - (i + 3) < 1) ? nodes - Math.abs(nodes - (i + 3)) : nodes - (i + 3); //Loader Node
    $(ob).attr('data-active', Math.abs((li >= nodes || li + 4 > nodes) ? li - 4 : li + 4) );
    loadingSelector = ob + ' li:nth-child(' + $(ob).attr('data-active') + ')'; //Active Node
    //console.log(li, i,...