Shit slider

First shit slider

by Aleksey Shukilovich

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="/style.css">
	<title>Document</title>
</head>
<body>

	<div class="shit-container">
		<button class="shit-button shit-button-prev">prev</button>
		<div class="shit-wrapper">
      <div class="shit-slide slide-1"><img src="http://via.placeholder.com/600x440/23fa2a/ffffff" alt=""></div>
      <div class="shit-slide slide-2"><img src="http://via.placeholder.com/800x400/af73aa/ffffff" alt=""></div>
      <div class="shit-slide slide-3"><img src="http://via.placeholder.com/320x340/87ac99/ffffff" alt=""></div>
      <div class="shit-slide slide-3"><img src="http://via.placeholder.com/320x340/8733a9/ffffff" alt=""></div>
		</div>
		<button class="shit-button shit-button-next">next</button>
	</div>

	<script src="/script.js"></script>
</body>
</html>

CSS

body {
  margin: 0;
  padding: 50px;
}

* {
  box-sizing: border-box;
}

.shit-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.shit-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
  
.shit-slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .25s;
  perspective: 500px;
  text-align: center;
  transform: translate3d(0, 0, 0);
  z-index: -1;
}

.shit-slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.shit-slide_prev,
.shit-slide_next {
  z-index: 1;
}

.shit-slide_next + div {
  z-index: 0;
}

.shit-slide.shit-slide_active {
  z-index: 2;
}

.shit-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.shit-button-next {
  right: 0;
}

.shit-button-prev {
  left: 0;
}

@media only screen and (min-width: 768px) {
  .shit-button-prev {
    display: none;
  }
}

JavaScript

function css(element, styles) {
	for (const key in styles) {
		element.style[key] = styles[key];
	}
}

class ShitSlider {
	constructor (selector) {
		this.selector = selector;
		this.sliderElement = document.querySelector(selector);
		this.sliderWrapElement = this.sliderElement.querySelector('.shit-wrapper');
		this.nextButton = this.sliderElement.querySelector('.shit-button-next');
		this.prevButton = this.sliderElement.querySelector('.shit-button-prev');

		this.countSlides = this.sliderElement.querySelectorAll('.shit-slide').length;
		this.currentIndex = 1;

		this.containerWidth = this.sliderElement.offsetWidth; // ширина слайдера
		this.widthActiveSlide = 0.86 * this.containerWidth; // ширина активного слайда
		this.containerHeight = 0.5625 * this.widthActiveSlide; // высота активного слайда и слайдера

		css(this.sliderElement, { height: this.containerHeight + 'px' });
	}

	/*
		Клонируем все слайды чтобы минимум было 5 штук, для сглаживания переходов
		Слайдам расставляем индексы
		Раздаем классы и устанавливаем положение
		Добавляем нужных слушателей событий (кнопки)
	*/
	init() {
		let slides = this.sliderElement.querySelectorAll('.shit-slide');

		for( const indexSlide in [...slides] ) {
			let clone = slides[indexSlide].cloneNode(true);

			slides[indexSlide].dataset.index = parseInt(indexSlide) + 1;
			css(slides[indexSlide], {
				width: this.widthActiveSlide + 'px',
				height: this.containerHeight + 'px'
			});

			clone.dataset.index = parseInt(indexSlide) + this.countSlides + 1;
			clone.classList.add('shit-slide-clone');
			css(clone, {
				width: this.widthActiveSlide + 'px',
				height: this.containerHeight + 'px'
			});
			this.sliderWrapElement.append(clone);
		}

		slides = this.sliderElement.querySelectorAll('.shit-slide');

		this.sliderWrapElement.prepend(slides[slides.length - 1]);
		this.sliderWrapElement.prepend(slides[slides.length - 2]);

		this.setClasses();
		this.setPosition();

		this.nextButton.addEventListener('click', () => {...