JSFiddle - React, Tailwind, and code Playground

carousel js css

by hronic

HTML

<div id="carousel" class="carousel">
  <button class="arrow prev">⇦</button>
  <div class="galerry">
       <ul class="images">
    <li><img src="https://js.cx/carousel/1.png"></li>
    <li><img src="https://js.cx/carousel/2.png"></li>
    <li><img src="https://js.cx/carousel/3.png"></li>
    <li><img src="https://js.cx/carousel/4.png"></li>
    <li><img src="https://js.cx/carousel/5.png"></li>
    <li><img src="https://js.cx/carousel/6.png"></li>
    <li><img src="https://js.cx/carousel/7.png"></li>
    <li><img src="https://js.cx/carousel/8.png"></li>
    <li><img src="https://js.cx/carousel/9.png"></li>
    <li><img src="https://js.cx/carousel/10.png"></li>
  </ul>
  </div>
    <button class="arrow next">⇨</button>
</div>

CSS

.arrow {
  position: absolute;
  top: 60px;
  padding: 0;
  background: #ddd;
  border-radius: 15px;
  border: 1px solid gray;
  font-size: 24px;
  line-height: 24px;
  color: #444;
  display: block;
}

.arrow:focus {
  outline: none;
}

.arrow:hover {
  background: #ccc;
  cursor: pointer;
}
 .carousel {
    position: relative;
    padding:10px 40px;
    width: 390px;
    background: #eaeaea;
    border: 1px solid #ccd;
    border-radius: 15px;
  }
  .galerry {
     border: 1px solid #cca;
     width: 380px;
     overflow: hidden;
  }
.carousel ul {
  height: 130px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: margin-left 0.5s;
  /* убрать между inline-block li лишние пробелы, которые есть в HTML */
  /* http://davidwalsh.name/remove-whitespace-inline-block */

  font-size: 0;
}

.carousel img {
  width: 130px;
  height: 130px;
  /* по умолчанию inline, но в ряде браузеров это даст лишнее пространство вокруг элементов */

  display: block;
}

.carousel li {
  /* если в HTML между элементами <li>..</li> есть пробелы, то они будут видны на странице,
  чтобы их избежать, нужно либо писать <li>..</li><li>..</li> вплотную, либо не ставить закрывающие </li> */

  display: inline-block;
}
 
  .prev {
    left: 7px;
  }
  .next {
    right: 7px;
  }

JavaScript

// этот код помечает картинки цифрами, для удобства разработки
    // его можно убрать, если не нужен
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
      lis[i].style.position = 'relative';
      var span = document.createElement('span');
      span.style.cssText = 'position:absolute;left:0;top:0';
      span.innerHTML = i + 1;
      lis[i].appendChild(span);
    }
    
    var carousel = document.getElementById('carousel'),
        list = carousel.querySelector('ul'),
        listElem = carousel.querySelectorAll('li');
        
    var width = 130,
        count = 3,
        position = 0;
        
    carousel.querySelector('.prev').onclick = function(){
      position = Math.min(position + width * count, 0);
      list.style.marginLeft = position + 'px';
    }
    carousel.querySelector('.next').onclick = function(){
      position = Math.max(position - width * count, -width * (listElem.length - count));
      list.style.marginLeft = position + 'px';
    }