JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section>
  <div class="container">
    <div class="step-slider" id="latest-slider">
      <dv class="row-left styled"></dv>
      <div class="items-outer">
        <div class="items-wrapper">
          <div class="item">
            1
            <img src="https://via.placeholder.com/550" alt="">
          </div>
          <div class="item">
            2
            <img src="https://via.placeholder.com/550" alt="">
          </div>
          <div class="item">  
            3
            <img src="https://via.placeholder.com/550" alt="">
          </div>
          <div class="item">
            4
            <img src="https://via.placeholder.com/550" alt="">
          </div>
          <div class="item hidden">
            5
            <img src="https://via.placeholder.com/550" alt="">
          </div>
        </div>
      </div>
      <dv class="row-right styled"></dv>
    </div>
  </div>
</section>

SCSS

.step-slider {
  position: relative;
  .items-outer {
    overflow: hidden;  
  }
  .items-wrapper {
    display: flex;
    width: 100%;
    .item {
      padding: 10px;
      width: 400px; // improve
      display: flex;
      justify-content: center;
      img {
        max-width: 100%;
      }
    }
  }
  .hidden {
    display: none;
  }
  .row-left.styled, .row-right.styled {
    top: 0;
    position: absolute;
    display: block;
    width: 20px;
    height: 100%;
    cursor: pointer;
    background-color: #eee;
  }
  .row-right.styled {
    right: -20px;
  }
  .row-left.styled {
    left: -20px;
  }
}

JavaScript

stepSlider('latest-slider', {
	count: 1
});

function stepSlider(sliderId, settings) {
  var slider = $('#' + sliderId);
  var wrapper = $('#' + sliderId + ' .items-wrapper');
  var items = $('#' + sliderId + ' .item');
  var rowLeft = $('#' + sliderId + ' .row-left');
  var rowRight = $('#' + sliderId + ' .row-right');

  settings = settings || {};
  var count = settings.count || 4;
  var currentSlide = settings.slide || 0;
  var sliderWidth, slideWidth, wrapperWidth;
  update();
  setTimeout(function() {
    wrapper.css('transition', 'all 0.5s');
  }, 10);


  function update() {
    sliderWidth = parseInt(slider.width());
    slideWidth = sliderWidth / count;
    wrapperWidth = Math.floor(sliderWidth * items.length / count);

    wrapper.css('width', wrapperWidth + 'px');
    wrapper.css('margin-left', '-' + Math.floor(sliderWidth * currentSlide / count) + 'px');

    $.each(items, function(index, item) {
      $(item).removeClass('hidden');
      $(item).css('width', slideWidth + 'px');
      console.log(item);
    });
  }

  function moveRight() {
    currentSlide += 1;
    if (currentSlide >= items.length - count + 1) {
      currentSlide = 0;
    }
    update();
  }

  function moveLeft() {
    currentSlide -= 1;
    if (currentSlide < 0) {
      currentSlide = items.length - count;
    }
    update();
  }

  rowRight.click(function(e) {
    e.preventDefault();
    moveRight();
  });
  rowLeft.click(function(e) {
    e.preventDefault();
    moveLeft();
  })
}