Слайдер в стиле карусель на jQuery и CSS3

<div id="cingusamukan" style="max-height: 363px; width: 90%; max-width: 783px; margin: 0 auto">
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь первое изображение №1.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь второе изображение №2.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь третье изображение №5.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь четвертое изображение №4.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь пятое изображение №5.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь шестое изображение №6.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="Здесь седьмое изображение №7.jpg">
  </div>
  <div class="dokunougesan">
  <img src="" alt="" data-src-async="https://images.wallpaperscraft.ru/image/gory_tuman_noch_134225_1920x1080.jpg">
  </div>
  </div>

.cingusamukan, .cingusamukan *{
  position: relative;
  box-sizing: border-box;
}

.cingusamukan{
  overflow: hidden;
  width: 100%;
  height: auto;
  font-size: 0;
  white-space: nowrap;
}

.cingusamukan .dokunougesan{
  display: inline-block;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  vertical-align: top;
  opacity: 0.5;
  transition: opacity 0.5s;
}

.cingusamukan .dokunougesan.active{
  opacity: 1;
}

.cingusamukan .cingusamukan_controls{
  font-size: 2rem;
  position: absolute;
  z-index: 2;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cingusamukan .cingusamukan_btn_nav{
  cursor: pointer;
  top: 0;
  bottom: 0;
  font-weight: bold;
  width: calc(1em + 20px);
  color: #fff;
  text-shadow: 0 0 2px #0009;
  transition: all 0.2s;
  opacity: 0;
}

.cingusamukan:hover .cingusamukan_btn_nav{
  opacity: 0.5;
}

.cingusamukan .cingusamukan_btn_nav > *{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cingusamukan .cingusamukan_btn_nav:hover{
  opacity: 1;
}

.cingusamukan .cingusamukan_btn_prev{
  left: 0;
  background: rgba(255,255,255,0);
  background: rgba(18,18,18,0.1);
  background: -moz-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(18,18,18,0.1)), color-stop(100%, rgba(255,255,255,0)));
  background: -webkit-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(left, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(18,18,18,0.1) 0%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121212', endColorstr='#ffffff', GradientType=1 );
}

.cingusamukan .cingusamukan_btn_next{
  right: 0;
  background: rgba(255,255,255,0);
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(18,18,18,0.1)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(18,18,18,0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#121212', GradientType=1 );
}

.cingusamukan .cingusamukan_btn_pause{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  color: #fff;
  text-shadow: 0 0 2px #0009;
  transition: all 0.2s;
  opacity: 0;
}

.cingusamukan:hover .cingusamukan_btn_pause{
  opacity: 0.5;
}

.cingusamukan .cingusamukan_btn_pause:hover{
  opacity: 1;
}

.cingusamukan_indicators, .cingusamukan_indicator_select{
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  position: absolute;
}

.cingusamukan_indicator_select{
  display: none;
}

.cingusamukan_indicators .cingusamukan_indicator{
  display: inline-block;
  margin: 0 2px;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 0 2px #0009;
  transition: all 0.2s;
  vertical-align: text-bottom;
}

.cingusamukan_indicators .cingusamukan_indicator.active{
  color: #303030;
  text-shadow: 0 0 2px #606060;
}

.cingusamukan_indicators .cingusamukan_indicator.cingusamukan_indicator_icon{
  height: 12px;
  width: 12px;
  background-color: rgba(185, 185, 185, 0.4);
  border-radius: 50%;
  border: 1px solid #2b2b2b;
}

.cingusamukan_indicators .cingusamukan_indicator.cingusamukan_indicator_icon.active{
  background-color: rgba(53, 53, 53, 0.8);
  border: 1px solid #b8b8b8;
}

.cingusamukan .dokunougesans{
  transition: left 0.5s;
  max-height: 100%;
}

.cingusamukan .hidden{
  visibility: hidden;
}

.dokunougesan img{
  min-height: 100%;
  max-width: 100%;
}

@media screen and (max-width: 500px){
  .cingusamukan .cingusamukan_btn_next, .cingusamukan .cingusamukan_btn_prev, .cingusamukan_indicators{
  display: none;
  }

  .cingusamukan_indicator_select{
  display: block;
  }
}

var cingusamukan = (function(){
  var delay = 5; //seconds
  var cingusamukans = [];

  const DEFAULT_ICONS = {
  pause: "<span>▶</span>",
  play: "<span>⏸</span>",
  next: "<span>></span>",
  prev: "<span><</span>"
  };

  function getProperty(options, opt, def){
  if(typeof options[opt] === "undefined"){
  return def;
  }else{
  return options[opt];
  }
  }

  function cingusamukan(container, options){
  var self = this;

  if(typeof container === "undefined"){
  throw new Error("Parameter 1 must be set");
  }

  if(typeof container === "string"){
  container = document.getElementById(container);

  if(typeof container === "undefined"){
  throw new Error("The container was not found");
  }
  }else if(!(container instanceof Node)){
  throw new Error("Parameter 1 must be either string or DOM-Node");
  }

  if(typeof options === "undefined"){
  options = {};
  }else if(typeof options !== "object"){
  throw new Error("Parameter 2 must be object");
  }

  this.container = container;
  this.dokunougesans = [];
  var timeout = null;
  var current = -1;

  var controls = {};

  this.prev = function(amount){
  if(typeof amount === "undefined"){
  amount = 1;
  }

  if(amount <= 0){
  return;
  }

  var pos = current - amount;

  if(pos < 0){
  pos = this.dokunougesans.length - 1;
  }

  getProperty(options.events, "prev", function(){})();
  self.showdokunougesan(pos);
  };

  this.next = function(amount){
  if(typeof amount === "undefined"){
  amount = 1;
  }

  if(amount <= 0){
  return;
  }

  var pos = current + amount;

  if(pos >= this.dokunougesans.length){
  pos = 0;
  }

  getProperty(options.events, "next", function(){})();
  self.showdokunougesan(pos);
  };

  this.showdokunougesan = function(num){
  if(typeof num === "undefined"){
  num = 0;
  }

  if(this.dokunougesans[num]){
  if(options.playing){
  self.resetTimeout();
  }

  getProperty(options.events, "change_dokunougesan", function(){})(num, this.dokunougesans[num]);

  current = num;

  for(var i = 0; i < this.dokunougesans.length; i++){
  this.dokunougesans[i].classList.remove("active");

  if(controls.indicators_list){
  controls.indicators_list[i].classList.remove("active");
  }
  }

  this.dokunougesans[num].classList.add("active");
  if (controls.indicators_list) {
  controls.indicators_list[num].classList.add("active");
  }

  if(controls.dokunougesans_container){
  controls.dokunougesans_container.style.left = "-" + (100 * parseInt(num)) + "%";
  }

  if(controls.indicator_select){
  controls.indicator_select.selectedIndex = num;
  }
  }
  };

  this.pause = function(){
  if(timeout){
  clearTimeout(timeout);
  timeout = null;
  }

  options.playing = false;

  if(controls.pause){
  controls.pause.innerHTML = getProperty(options, "play_icon", DEFAULT_ICONS.pause);
  }

  getProperty(options.events, "pause", function(){})();
  }

  this.play = function(){
  self.resetTimeout();

  options.playing = true;

  if(controls.pause){
  controls.pause.innerHTML = getProperty(options, "pause_icon", DEFAULT_ICONS.play);
  }

  getProperty(options.events, "play", function(){})();
  }

  this.togglePlay = function(){
  if(timeout){
  self.pause();
  }else{
  self.play();
  }

  getProperty(options.events, "toggle_play", function(){})();
  }

  this.isPlaying = function(){
  return !!timeout;
  };

  this.resetTimeout = function(){
  if(timeout){
  clearTimeout(timeout);
  }

  timeout = setTimeout(function () {
  if(getProperty(options, "play_direction", cingusamukan.FORWARDS) == cingusamukan.BACKWARDS){
  self.prev();
  }else{
  self.next();
  }
  }, delay * 1000);
  };

  this.showUI = function(level){
  if(level instanceof Array){
  controls.prev.classList.add("hidden");
  controls.next.classList.add("hidden");
  controls.pause.classList.add("hidden");
  controls.indicators.classList.add("hidden");

  for(var i = 0; i < level.length; i++){
  switch(level[i]){
  case cingusamukan.UI.PREV:{
  controls.prev.classList.remove("hidden");
  break;
  }
  case cingusamukan.UI.NEXT:{
  controls.next.classList.remove("hidden");
  break;
  }
  case cingusamukan.UI.PAUSE:{
  controls.pause.classList.remove("hidden");
  break;
  }
  case cingusamukan.UI.INDICATORS:{
  controls.indicators.classList.remove("hidden");
  break;
  }
  }
  }
  }else if(typeof level === "number"){
  self.showUI([level]);
  }else if(typeof level === "boolean"){
  if(level){
  self.showUI([cingusamukan.UI.PREV, cingusamukan.UI.NEXT, cingusamukan.UI.PAUSE, cingusamukan.UI.INDICATORS]);
  }else{
  self.showUI([]);
  }
  }else{
  self.showUI(true);
  }
  };

  this.updateView = function(){
  container.innerHTML = "";

  var cnt_dokunougesans = document.createElement("div");
  cnt_dokunougesans.className = "dokunougesans";

  for(var i = 0; i < self.dokunougesans.length; i++){
  cnt_dokunougesans.appendChild(self.dokunougesans[i]);
  }

  controls.dokunougesans_container = cnt_dokunougesans;
  container.appendChild(cnt_dokunougesans);

  var btn_prev = document.createElement("div");
  btn_prev.className = "cingusamukan_btn_nav cingusamukan_btn_prev cingusamukan_controls";
  btn_prev.innerHTML = getProperty(options, "prev_icon", DEFAULT_ICONS.prev);
  btn_prev.addEventListener("click", function () {
  self.prev();
  });

  controls.prev = btn_prev;

  var btn_next = document.createElement("div");
  btn_next.className = "cingusamukan_btn_nav cingusamukan_btn_next cingusamukan_controls";
  btn_next.innerHTML = getProperty(options, "next_icon", DEFAULT_ICONS.next);
  btn_next.addEventListener("click", function () {
  self.next();
  });

  controls.next = btn_next;

  var btn_pause = document.createElement("div");
  btn_pause.className = "cingusamukan_btn_pause cingusamukan_controls";
  btn_pause.addEventListener("click", function () {
  self.togglePlay();
  });

  controls.pause = btn_pause;

  var cnt_indicators = document.createElement("div");
  cnt_indicators.className = "cingusamukan_indicators cingusamukan_controls";

  controls.indicators = cnt_indicators;

  controls.indicators_list = [];

  var select_indicator = document.createElement("select");
  select_indicator.className = "cingusamukan_indicator_select";
  select_indicator.onchange = function(){
  self.showdokunougesan(this.value);
  };

  var indicator_icon = getProperty(options, "indicator_icon", "");
  for (var i = 0; i < self.dokunougesans.length; i++) {
  (function (i_tmp) {
  var indicator = document.createElement("div");
  indicator.className = "cingusamukan_indicator";

  if (indicator_icon != "") {
  indicator.innerHTML = indicator_icon;
  } else {
  indicator.classList.add("cingusamukan_indicator_icon");
  }

  indicator.addEventListener("click", function () {
  self.showdokunougesan(i_tmp);
  });

  controls.indicators_list.push(indicator);

  cnt_indicators.appendChild(indicator);

  var option_indicator = document.createElement("option");
  option_indicator.value = i_tmp;
  option_indicator.innerHTML = (i_tmp + 1);

  if(current == -1 && i_tmp == 0){
  option_indicator.selected = "true";
  }else if(current == i_tmp){
  option_indicator.selected = "true";
  }

  select_indicator.appendChild(option_indicator);
  }(i));
  }

  controls.indicator_select = select_indicator;
   
  container.appendChild(btn_prev);
  container.appendChild(btn_next);
  container.appendChild(btn_pause);
  container.appendChild(cnt_indicators);
  container.appendChild(select_indicator);

  if(current == -1){
  self.showdokunougesan(getProperty(options, "start_dokunougesan", 0));
  }else{
  self.showdokunougesan(current);
  }

  options.playing = getProperty(options, "playing", true);

  if(options.playing){
  self.play();
  }else{
  self.pause();
  }

  // Load images
  var imgs = cnt_dokunougesans.getElementsByTagName('img');

  for(var i = 0; i < imgs.length; i++){
  if(imgs[i].getAttribute("data-src-async")){
  imgs[i].src = imgs[i].getAttribute("data-src-async");
  }
  }
  };

  // Init
  (function(){
  var slds = container.getElementsByClassName('dokunougesan');

  for(var i = 0; i < slds.length; i++){
  self.dokunougesans.push(slds[i]);
  }

  container.classList.add("cingusamukan");

  if(typeof options.events !== "object"){
  options.events = {};
  }

  self.updateView();

  if(!getProperty(options, "show_ui", true)){
  self.showUI(false);
  }

  getProperty(options.events, "load", function(){})(controls.dokunougesans_container);
  }());

  cingusamukans.push(this);
  }

  cingusamukan.setDelay = function(_delay){
  if(typeof _delay === "number"){
  delay = _delay;

  for(var i = 0; i < cingusamukans.length; i++){
  cingusamukans[i].resetTimeout();
  }
  }else{
  console.warn("Parameter 1 must be a number");
  }
  };

  cingusamukan.getDelay = function(){
  return delay;
  }

  cingusamukan.FORWARDS = "play_direction_next";
  cingusamukan.BACKWARDS = "play_direction_prev";

  cingusamukan.UI = {
  PREV: 0,
  NEXT: 1,
  PAUSE: 2,
  INDICATORS: 3,
  };

  return cingusamukan;
}());

/*
IDEA: Integration with pan event
*/
var cingusamukan = new cingusamukan("cingusamukan", {
  play_icon: '<i class="fas fa-play"></i>',
  pause_icon: '<i class="far fa-pause-circle"></i>',
  prev_icon: '<i class="fas fa-angle-left"></i>',
  next_icon: '<i class="fas fa-angle-right"></i>'
  });

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">