JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <link rel="stylesheet" href="styles.css">
    <title>SeitenTitel</title>
  </head>

  <body>
    <div class="newJsSlider" id="slider_standard">
      <div><img src="16-9/01.jpg" alt=""></div>
      <div><img src="16-9/02.jpg" alt=""></div>
      <div><img src="16-9/03.jpg" alt=""></div>
      <div><img src="16-9/04.jpg" alt=""></div>
      <div><img src="16-9/05.jpg" alt=""></div>
      <div><img src="16-9/06.jpg" alt=""></div>
      <div><img src="16-9/07.jpg" alt=""></div>
      <div><img src="16-9/08.jpg" alt=""></div>
      <div><img src="16-9/09.jpg" alt=""></div>
      <div><img src="16-9/10.jpg" alt=""></div>
      <div><img src="16-9/11.jpg" alt=""></div>
      <div><img src="16-9/12.jpg" alt=""></div>
      <div><img src="16-9/01.jpg" alt=""></div>
      <div><img src="16-9/02.jpg" alt=""></div>
      <div><img src="16-9/03.jpg" alt=""></div>
      <div><img src="16-9/04.jpg" alt=""></div>
    </div>
    <script type="text/javascript" src="scripts.js"></script>
  </body>

</html>

CSS

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/OpenSans-Light.ttf');
}

@font-face {
  font-family: 'Icons';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/Font Awesome 5 Free-Solid-900.otf');
}

.icons {
  font-family: 'Icons', sans-serif;
  padding: 0 15px;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html,
body {
  width: 100%;
  overflow: hidden;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.screenreader {
  display: none;
}

.newJsSlider {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  height: auto;
  background: black;
  padding: 15px 0 15px 0;
}

.newJsSlideLeft,
.newJsSlideRight {
  font-size: 44px;
  color: white;
  cursor: pointer;
  position: absolute;
  border: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  top: 0;
  background-color: hsla(0, 0%, 0%, 50%);
}


.newJsSlideLeft {
  left: 0;
}

.newJsSlideRight {
  right: 0;
}

.newJsSliderElementsContainer {}

.newJsSliderDragContainer {
  overflow: hidden;
}

.newJsSliderElement {
  float: left;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

.newJsSliderElement img {
  display: block;
  width: 100%;
}

JavaScript

var newJs = {

  defaultPrevLink: '<button type="button" class="newJsSlideLeft">Back</button>',
  defaultNextLink: '<button type="button" class="newJsSlideRight">Forward</button>',
  defaultAmountOfElements: 6,
  defaultElementsToSlide: 6,
  defaultSpacing: 8,

  // return a html string as dom elements
  // i.e. defaultPrevLink string
  stringToElements: function(htmlString) {
    var template = document.createElement('template');
    template.innerHTML = htmlString;
    return template.content.childNodes;
  },

  // append settings to elements
  settings: function(className, settingsObj) {
    var sliderCollection = document.querySelectorAll(className);
    for (var i = 0; i < sliderCollection.length; i++) {
      sliderCollection[i].settings = settingsObj;
    }
  },

  // initialize
  init: function(event) {
    // init sliders
    var sliderCollection = document.querySelectorAll('.newJsSlider');
    for (var i = 0; i < sliderCollection.length; i++) {

      var dragContainer = document.createElement('div');
      dragContainer.classList.add('newJsSliderDragContainer');
      dragContainer.draggable = "true";
      var elementsContainer = document.createElement('div');
      elementsContainer.classList.add('newJsSliderElementsContainer');

      var elementsCollection = sliderCollection[i].children;

      // calculate width
      var containerWidth = sliderCollection[i].offsetWidth + ((sliderCollection[i].settings.spacing) ? sliderCollection[i].settings.spacing : newJs.defaultSpacing);
      var elementWidth = containerWidth / ((sliderCollection[i].settings.amountOfElements) ? sliderCollection[i].settings.amountOfElements : newJs.defaultAmountOfElements);
      elementWidth -= (sliderCollection[i].settings.spacing) ? sliderCollection[i].settings.spacing : newJs.defaultSpacing;
      elementWidth = Math.ceil(elementWidth);
      elementsContainer.style = 'width: ' + elementWidth * (sliderCollection[i].children.length + 1) + 'px;';

      var count = 0;

     ...