JSFiddle - React, Tailwind, and code Playground

by nicolas_canfrere

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="player-top-1">
    <div class="content-player">
        <div class="slider__prev slider__nav" id="prev">
            <i class="fa fa-chevron-left"></i>
        </div>
        <div class="player-zone">
            <div class="slider__song previous-song" id="previous-song-div">

            </div>
            <div class="slider__song actual-song" id="actual-song-div">
              <div class="label">
                <span id="label-text"></span>
              </div>
            </div>
            <div class="slider__song next-song" id="next-song-div">

            </div>
        </div>
        <div class="slider__next slider__nav" id="next">
            <i class="fa fa-chevron-right"></i>
        </div>
    </div>
</div>
<div class="bar">
  <div class="bar__left bar__zone">
    <ul>
      <li><a href="">Partager</a></li>
      <li><a href=""><span id="subscribers">0</span> abonnés</a></li>
    </ul>
  </div>
  <div class="bar__right bar__zone">
    <ul>
      <li><a href=""><span id="titles"></span> titres</a></li>
      <li><a href=""><span id="duration"></span></a></li>
    </ul>
  </div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}
body{
  background-color: #fff;
  font-family: Arial, sans-serif;
}
.player-top-1{
  width: 100%;
  position: relative;
  background-color: #364347;
}
.player-top-1 img{
  display: block;
  border: 0;
  width: 100%;
  height: auto;
}
.content-player{
  position: relative;
  width: 1140px;
  margin: 0 auto;
  height: 400px;
  padding: 30px 0;
}
.slider__nav{
  position: absolute;
  background-color: transparent;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  height: 340px;
  line-height: 340px;
  width: 60px;
  top: 30px;
  bottom: 0;
  cursor: pointer;
  text-align: center;
}
.slider__prev{
  left: 0;
}
.slider__next{
  right: 0;
}
.player-zone{
  width: 1020px;
  position: absolute;
  left: 60px;
}
.player-zone:before, .player-zone:after{
  content: '';
  display: table;
}
.player-zone:after{
  clear: both;
}
.slider__song{
  width: 340px;
  height: 340px;
  background-color: #fff;
  float: left;
  box-shadow: rgba(0,0,0, 0.5) 0 0 6px;
  position: relative;
  z-index: 1;
}
.slider__song.actual-song{
   transform-origin: 50% 50px;
   transform: scale(1.3);
   z-index: 2;
   border: 4px solid #fff;
}

.slider__song.actual-song .label{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  line-height: 60px;
  background-color: rgba(0,0,0,0.6);
  z-index: 50;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}

.bar{
  width: 100%;
}
.bar:before, .bar:after{
  content: '';
  display: table;
}
.bar:after{
  clear: both;
}
.bar__zone {
  width: 50%;
  float: left;
}
.bar__zone ul {
  list-style: none;
  text-align: center;
}
.bar__zone ul li{
  display: inline-block;
  
}
.bar__zone ul li a{
  color: #364347;
  text-decoration: none;
  outline: none;
  font-size: 0.9em;
  display: block;
  padding: 5px 20px;
  margin: 15px 0;
}

.bar__zone ul li:first-child a {
  border-right: 1px solid #364347;
}

JavaScript

var records = [
    {src:"http://lorempicsum.com/futurama/350/350/1", subscribers: 12, titles: 13, duration: '1h37', label: "lorem aaa"},
    {src:"http://lorempicsum.com/futurama/350/350/2", subscribers: 50, titles: 10, duration: '1h10', label: "lorem bbb"},
    {src:"http://lorempicsum.com/futurama/350/350/3", subscribers: 8, titles: 5, duration: '53mn', label: "lorem ccc"},
    {src:"http://lorempicsum.com/rio/350/350/1", subscribers: 25, titles: 12, duration: '1h15', label: "lorem ddd"},
    {src:"http://lorempicsum.com/rio/350/350/2", subscribers: 18, titles: 13, duration: '1h18', label: "lorem eee"},
    {src:"http://lorempicsum.com/rio/350/350/3", subscribers: 10, titles: 11, duration: '60mn', label: "lorem fff"}
];

var imgStack = [];
var len, curr, n, p, maxIdx;
var currentHolder = $("#actual-song-div");
var nextHolder = $("#next-song-div");
var prevHolder = $("#previous-song-div");
var subscribers = $("#subscribers");
var titles = $("#titles");
var duration = $("#duration");
var label = $("#label-text");
records.forEach(function (i) {
    var img = new Image();
    img.src = i.src;
    imgStack.push($(img));
});
len = imgStack.length;
maxIdx = len - 1;
curr = 0; n = 1; p = maxIdx;
function move (currentNum) {
    currentHolder.children('img').remove();
    nextHolder.empty();
    prevHolder.empty();
    p = ((currentNum - 1) < 0) ? maxIdx : currentNum - 1;
    n = ((currentNum + 1) > maxIdx) ? 0 : currentNum + 1;
    currentHolder.append(imgStack[curr]);
    nextHolder.append(imgStack[n]);
    prevHolder.append(imgStack[p]);
    subscribers.text(records[currentNum]['subscribers']);
    titles.text(records[currentNum]['titles']);
    duration.text(records[currentNum]['duration']);
    label.text(records[currentNum]['label']);
}
move(curr);
function moveRight(){
    curr -= 1;
    if(curr < 0) {
        curr = maxIdx;
    }
    move(curr);
}
function moveLeft(){
    curr += 1;
    if(curr > maxIdx) {
        curr = 0;
    }
   ...