JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="wrapper">
  <span class="left"></span>
  <span class="right"></span>
  <div class="content">
    <ul>
      <li data-id="1">1</li>
      <li data-id="2">2</li>
      <li data-id="3">3</li>
      <li data-id="4">4</li>
      <li data-id="5">5</li>
      <li data-id="6">6</li>
      <li data-id="7">7</li>
      <li data-id="8">8</li>
      <li data-id="9">9</li>
      <li data-id="10">10</li>
    </ul>
  </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.wrapper {
    position: relative;
    width: 60%;
    height: 30px;
    border: 1px solid red;
    overflow: hidden;
  }
  .wrapper span {
    width: 20px;
    height: 100%;
    border: 1px solid orange;
    background: green;
    cursor: pointer;
    position: relative;
}
.left {
    float: left;
    z-index: 2;
}
.right {
    float: right;
    z-index: 2;
}
/* .content {
    width: 100%;
    height: inherit;
} */
.content ul li {
  display: inline;
  z-index: 0;
  position: relative;
  width: 50px;
  heigth: 50px;
  float: left;
  background: grey;
  margin: 5px;
  left:0px;
}

JavaScript

<!-- My own slider -->
var leftPos = 0;
$(document).ready(function(){
	$('.left').click(function(){
  if ()
 $('.content ul li').css ("transform","translate('+leftPos-=60+')"
  })
  $('.right').click(function(){
 $('.content ul li').css("left",leftPos+=60)
 })
})