Simple jquery Slider

by Ed Borodin

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<a href="javascript:void(0);" class="btnBackward">Backward</a>
<a href="javascript:void(0);" class="btnForward">Forward</a>
<div class="jquery-carousel">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
  </ul>
</div>

CSS

.jquery-carousel {
  position: relative;
  padding-top: 20px;
  overflow: hidden;
  height: 200px;
  background-color: #ddd;
}

.jquery-carousel ul {
  position: relative;
  height: 50px;
  list-style: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.jquery-carousel ul li {
  position: absolute;
  float: left;
  margin-right: 1px;
  background: #CCCCCC;
  width: 190px;
  height: 100px;
  text-align: center;
  padding-top: 25px;
}

JavaScript

$(function() {
  var carSlide = $('.jquery-carousel ul');
  var carSlideChild = carSlide.find('li');
  var NumberOfClick = 0;
  var isClick = true;
  /*Adding 1px margin to Carousel Slide*/
  itemLength = carSlide.find('li:first').width() + 5;
  //Wrapper Width
  //$('.jquery-carousel').css('width', 3.25 * itemLength + 'px');
  var wrapperHeight = $('.jquery-carousel').height();

  var tops = [];
  var objLI = $('.jquery-carousel ul li');
  for (i = 0; i < carSlideChild.length; i++) {
    var y = Math.floor(Math.random() * (wrapperHeight - 100));
    console.log(y)
    tops.push(y);
  }

  var indexer = 0;
  //console.log(objLI)
  objLI.each(function() {
    console.log(tops[indexer])
    $(this).css('top', tops[indexer] + 'px');
    indexer++;
  });



  carSlide.width(itemLength * carSlideChild.length);
  refreshPosition();

  $('.btnForward').click(function() {
    if (isClick) {
      isClick = false;
      NumberOfClick++;

      carSlide.stop(false, true).animate({
        left: '-=' + itemLength
      }, 300, function() {
        lastItem = carSlide.find('li:first');
        lastItem.remove().appendTo(carSlide);
        lastItem.css('left', ((carSlideChild.length - 1) * (itemLength)) + (NumberOfClick * itemLength));
        isClick = true;
      });
    }
  });

  $('.btnBackward').click(function() {
    if (isClick) {
      isClick = false;
      NumberOfClick--;
      lastItem = carSlide.find('li:last');
      lastItem.remove().prependTo(carSlide);

      lastItem.css('left', itemLength * NumberOfClick);
      carSlide.finish(true).animate({
        left: '+=' + itemLength
      }, 300, function() {
        isClick = true;
      });
    }
  });

  function refreshPosition() {
    carSlideChild.each(function() {
      $(this).css('left', itemLength * carSlideChild.index($(this)));
    });
  }
});