карусель

by Aleksandr Tomashov

HTML

<div id="carousel" class="carousel">
  <button class="arrow prev">⇦</button>
  <div class="gallery">
    <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

.carousel {
  position: relative;
  width: 398px;
  padding: 10px 40px;
  border: 1px solid #CCC;
  border-radius: 15px;
  background: #eee;
}

.gallery {
  width: 390px;
  overflow: hidden;
}

.gallery ul {
  height: 130px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: margin-left 250ms;
  font-size: 0;
}

.gallery li {
  display: inline-block;
}

.carousel img {
  width: 130px;
  height: 130px;
  display: block;
}

.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;
}

.prev {
  left: 7px;
}

.next {
  right: 7px;
}

JavaScript

'use strict'

/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
  lis[i].style.position = 'relative';
  var span = document.createElement('span');
  // обычно лучше использовать CSS-классы,
  // но этот код - для удобства разработки, так что не будем трогать стили
  span.style.cssText = 'position:absolute;left:0;top:0';
  span.innerHTML = i + 1;
  lis[i].appendChild(span);
}

/* конфигурация */
var width = 130; // ширина изображения
var count = 3; // количество изображений

var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');

var position = 0; // текущий сдвиг влево

carousel.querySelector('.prev').onclick = function() {
  // сдвиг влево
  // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
  position = Math.min(position + width * count, 0)
  list.style.marginLeft = position + 'px';
};

carousel.querySelector('.next').onclick = function() {
  // сдвиг вправо
  // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
  position = Math.max(position - width * count, -width * (listElems.length - count));
  list.style.marginLeft = position + 'px';
};