another Multple Slider

okk

by Nehemia Mwansasu

HTML

<div class="carousel js-product-carousel">
  <div class="carousel__view">
    <span class="carousel__control js-carousel-prev"><i class="icon">previous</i></span>
    <span href="#" class="carousel__control js-carousel-next"><i class="icon">next</i></span>
    <ul class="product-list js-product-list">
      <li class="product-list__item">
        <div data-slide="1" class="product">
          <span>1</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="2" class="product">
          <span>2</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="3" class="product">
          <span>3</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="4" class="product">
          <span>4</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="5" class="product">
          <span>5</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="6" class="product">
          <span>6</span>
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="carousel js-product-carousel">
  <div class="carousel__view">
    <span class="carousel__control js-carousel-prev"><i class="icon">previous</i></span>
    <span href="#" class="carousel__control js-carousel-next"><i class="icon">next</i></span>
    <ul class="product-list js-product-list">
      <li class="product-list__item">
        <div data-slide="1" class="product">
          <span>1</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="2" class="product">
          <span>2</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="3" class="product">
          <span>3</span>
        </div>
      </li>
      <li class="product-list__item">
        <div data-slide="4" class="product">
          <span>4</span>
        </div>
      </li>
      <li...

CSS

.carousel {
  margin: 20px;
}
.carousel__view {
  width: calc((200px*4) + 22px);
  height: 300px;
  background: white;
  box-shadow: 0 1px 8px #888888;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.carousel__control {
  position: absolute;
  z-index: 1;
  height: 300px;
  width: 70px;
  background-color: rgba(221, 221, 221, 0.5);
  transition: background-color .3s;
  display: table;
}
.carousel__control .icon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.carousel__control:hover {
  background-color: rgba(221, 221, 221, 0.8);
}
.carousel__control:first-of-type {
  left: 0;
}
.carousel__control:last-of-type {
  right: 0;
}

.product-list {
  position: absolute;
  margin: 0;
  padding: 0;
  transition: transform .3s;
  transform: translateX(0px);
  list-style: none;
  height: 300px;
}
.product-list__item {
  width: 200px;
  height: 300px;
  display: inline-block;
}

.product {
  display: table;
  height: 100%;
  width: 100%;
}
.product span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: white;
  font-size: 50px;
}
.product[data-slide="1"] {
  background-color: blue;
}
.product[data-slide="2"] {
  background-color: green;
}
.product[data-slide="3"] {
  background-color: yellow;
}
.product[data-slide="4"] {
  background-color: orange;
}
.product[data-slide="5"] {
  background-color: red;
}
.product[data-slide="6"] {
  background-color: pink;
}

body {
  margin: 50px;
}

JavaScript

(function() {
  var carousels = document.querySelectorAll('.js-product-carousel');
  
  [].forEach.call(carousels, function(carousel) {
    carouselize(carousel);
  });
  
})();

function carouselize(carousel) {
  var productList = carousel.querySelector('.js-product-list');
  var productListWidth = 0;
  var productListSteps = 0;
  var products = carousel.querySelectorAll('.product');
  var productAmount = 0;
  var productAmountVisible = 4;
  var carouselPrev = carousel.querySelector('.js-carousel-prev');
  var carouselNext = carousel.querySelector('.js-carousel-next');

  //Count all the products
  [].forEach.call(products, function(product) {
    productAmount++;
    productListWidth += 250;
    productList.style.width = productListWidth+"px";
  });

  carouselNext.onclick = function() {
    if(productListSteps < productAmount-productAmountVisible) {
      productListSteps++;
      moveProductList();
    }
  }
  carouselPrev.onclick = function() {
    if(productListSteps > 0) {
      productListSteps--;
      moveProductList();
    }
  }
  
  // This is a bit hacky, let me know if you find a better way to do this!
  // Move the carousels product-list
  function moveProductList() {
    productList.style.transform = "translateX(-"+205*productListSteps+"px)";
  }
}