Ant-carousel

by sikuda

HTML

<div class="ant-carousel">
  <div class="ant-carousel-hider">
    <ul class="ant-carousel-list">
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img0.jpg" alt="0">
        <p>Описание 0</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img1.jpg" alt="1">
        <p>Описание 1</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img2.jpg" alt="2">
        <p>Описание 2</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img3.jpg" alt="3">
        <p>Описание 3</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img4.jpg" alt="4">
        <p>Описание 4</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img5.jpg" alt="5">
        <p>Описание 5</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img6.jpg" alt="6">
        <p>Описание 6</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img7.jpg" alt="7">
        <p>Описание 7</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img8.jpg" alt="8">
        <p>Описание 8</p>
      </li>
      <li class="ant-carousel-element"><img src="http://pvbk.spb.ru/inc/carousel/imgs/img9.jpg" alt="9">
        <p>Описание 9</p>
      </li>
    </ul>
  </div>
  <div class="ant-carousel-arrow-left"></div>
  <div class="ant-carousel-arrow-right"></div>
  <div class="ant-carousel-dots"></div>
</div>

CSS

/* User styles */
@media screen and (min-width: 911px) {
  .ant-carousel {
    max-width: 810px;
  }
}

@media screen and (min-width: 641px) and (max-width: 910px) {
  .ant-carousel {
    max-width: 540px;
  }
}

@media screen and (max-width: 640px) {
  .ant-carousel {
    max-width: 270px;
  }
}

.ant-carousel {
  margin: 50px auto auto;
  padding-top: 10px;
  border: 1px solid #ccd;
  background-color: white;
}

.ant-carousel-element {
  width: 270px;
  text-align: center;
}

/* General styles */
.ant-carousel {
  width: auto;
  position: relative;
}

.ant-carousel-hider {
  overflow: hidden;
}

.ant-carousel-list {
  width: auto;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
}

.ant-carousel-element {
  display: block;
  flex: 0 0 auto;
}

/* Navigation item styles */
div.ant-carousel-arrow-left,
div.ant-carousel-arrow-right {
  width: 22px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  opacity: 0.6;
  z-index: 32;
}

div.ant-carousel-arrow-left {
  left: -40px;
  top: 40%;
  display: block;
  background: url("http://pvbk.spb.ru/inc/carousel/ant-files/ant-arrow-left.png") no-repeat;
}

div.ant-carousel-arrow-right {
  right: -40px;
  top: 40%;
  display: block;
  background: url("http://pvbk.spb.ru/inc/carousel/ant-files/ant-arrow-right.png") no-repeat;
}

div.ant-carousel-arrow-left:hover {
  opacity: 1.0;
}

div.ant-carousel-arrow-right:hover {
  opacity: 1.0;
}

div.ant-carousel-dots {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: -30px;
  z-index: 30;
  text-align: center;
}

span.ant-dot {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  padding: 0;
  display: inline-block;
  background-color: #BBB;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript

function Ant(crslId) {

	let id = document.getElementById(crslId);
	if(id) {
		this.crslRoot = id
	}
	else {
		this.crslRoot = document.querySelector('.ant-carousel')
	};

	// Carousel objects
	this.crslList = this.crslRoot.querySelector('.ant-carousel-list');
	this.crslElements = this.crslList.querySelectorAll('.ant-carousel-element');
	this.crslElemFirst = this.crslList.querySelector('.ant-carousel-element');
	this.leftArrow = this.crslRoot.querySelector('div.ant-carousel-arrow-left');
	this.rightArrow = this.crslRoot.querySelector('div.ant-carousel-arrow-right');
	this.indicatorDots = this.crslRoot.querySelector('div.ant-carousel-dots');

	// Initialization
	this.options = Ant.defaults;
	Ant.initialize(this)
};

Ant.defaults = {

	// Default options for the carousel
	elemVisible: 5, // Кол-во отображаемых элементов в карусели
	loop: true,     // Бесконечное зацикливание карусели 
	auto: true,     // Автоматическая прокрутка
	interval: 5000, // Интервал между прокруткой элементов (мс)
	speed: 750,     // Скорость анимации (мс)
	touch: true,    // Прокрутка  прикосновением
	arrows: true,   // Прокрутка стрелками
	dots: true      // Индикаторные точки
};

Ant.prototype.elemPrev = function(num) {
	num = num || 1;

	if(this.options.dots) this.dotOn(this.currentElement);
	this.currentElement -= num;
	if(this.currentElement < 0) this.currentElement = this.dotsVisible-1;
	if(this.options.dots) this.dotOff(this.currentElement);

	if(!this.options.loop) {  // сдвиг вправо без цикла
		this.currentOffset += this.elemWidth*num;
		this.crslList.style.marginLeft = this.currentOffset + 'px';
		if(this.currentElement == 0) {
			this.leftArrow.style.display = 'none'; this.touchPrev = false
		}
		this.rightArrow.style.display = 'block'; this.touchNext = true
	}
	else {                    // сдвиг вправо с циклом
		let elm, buf, this$ = this;
		for(let i=0; i<num; i++) {
			elm = this.crslList.lastElementChild;
			buf = elm.cloneNode(true);
			this.crslList.insertBefore(buf,...