JSFiddle - React, Tailwind, and code Playground

by Vasiliy

HTML

<section>
    <div class="carousel" id="carousel-one-by-one-infinite">
        <div class="slide">
            <div class="cardsimple">
                <figure class="cardthumbnail">
                    <div class="adoric_element element-image element-selected" data-radius="0.00" style="margin: 0 auto; width: 99px; height: 94px; line-height: normal; opacity: 1; z-index: 71;" data-width="94" data-height="94" data-left="504" data-top="94"><img class="inner-element" src="https://adoric-user-images.s3.amazonaws.com/1541945007206_707tij9c31e/_________55_LG_SMART_4K.JPG" style="width: 100%; height: 100%; opacity: 1; box-shadow: none; border-radius: 0px;" data-event-name="Conversion" data-shadow-distance="0" data-width="NaN" data-height="NaN" data-left="NaN" data-top="NaN"><span class="move_adoric_element" style="z-index: -1; cursor: move; border-radius: 30px;"></span></div>
                </figure>
                <div class="adoric_element element-text element-selected" style="position: absolute; width: 171px; height: auto; min-height: 25px; cursor: auto; text-align: center; opacity: 1; z-index: 72;" data-width="203" data-height="25" data-left="437" data-top="212"><span class="inner-element" data-gramm="false" style="position: relative; top: 118px; left: 14px; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: 300; font-size: 14px; line-height: 1; font-family: Assistant, sans-serif; white-space: pre-line; overflow-wrap: break-word; display: block; opacity: 1; text-align: inherit; letter-spacing: 0em; margin-right: 0em; text-shadow: none; direction: rtl;" data-event-name="Conversion" data-shadow-distance="0" data-width="NaN" data-height="NaN" data-left="NaN" data-top="NaN">טלוויזיה 55" LG SMART 4K</span><span class="move_adoric_element" style="z-index: -1; cursor: move; border-radius: 30px;"></span></div>
                <div class="adoric_element element-text element-selected" style="position: absolute; margin:0 auto; width: 171px; height:...

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
}
section {
  padding: 15px 0 0 30px;
  width: 650px; 
  height: 260px;
}

.carousel {
  overflow: hidden;
  position: relative;
  width: 650px;
}

.carousel:before,
.carousel:after {
  content: "";
  display: table;
}

.carousel:after {
  clear: both;
}

.slide {
  float: left;
  height: 260px;
  text-align: center;
  width: 200px;
}

.purejscarousel-dots-container {display: none !important;}


.purejscarousel-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  height: 20px;
  margin-top: -35px;
  position: absolute;
  top: 50%;
  width: 20px;
}

.purejscarousel-btn-next {
  opacity: 0.65; 
  box-shadow: none; 
  border-radius: 0px;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  right: 5px;
  -moz-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

.purejscarousel-btn-prev {
  opacity: 0.65; 
  box-shadow: none; 
  border-radius: 0px;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  left: 5px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.cardsimple {
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: all 0.3s ease 0s;
  }
.cardsimple .cardthumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

JavaScript

(function() {
  'use strict';

  window.PureJSCarousel = function(settings) {
    this.carousel          = document.querySelector(settings.carousel);
    this.slides            = this.carousel.querySelectorAll(settings.slide);
    this.btnNext           = this.carousel.querySelector(settings.btnNext) || null;
    this.btnPrev           = this.carousel.querySelector(settings.btnPrev) || null;
    this.activeIndex       = settings.activeIndex || 0;
    this.oneByOne          = settings.oneByOne || false;
    this.speed             = settings.speed || 400;
    this.delay             = settings.delay || 0;
    this.effect            = settings.effect || 'linear';
    this.infinite          = settings.infinite || false;
    this.autoplay          = settings.autoplay || false;
    this.autoplayDelay     = settings.autoplayDelay || 400;
    this.autoplayDirection = settings.autoplayDirection || 'next';

    this.autoplayTimer     = null;
    this.minPos            = null;
    this.slidesToShow      = null;
    this.maxIndex          = null;
    this.isEnabled         = null;

    this.build();
  };

  PureJSCarousel.prototype.build = function() {
    var _                    = this,
        dotsLength,
        i,
        windowResizeTimeout,
        windowWidth          = window.innerWidth,
        windowHeight         = window.innerHeight;

    _.minPos       = (_.carousel.offsetWidth - (_.slides.length * _.slides[0].offsetWidth));
    _.slidesToShow = Math.round(_.carousel.offsetWidth / _.slides[0].offsetWidth);
    _.maxIndex     = 0;
    _.isEnabled    = 1;

    _.carousel.className += ' purejscarousel';

    //create slides container
    _.slidesContainer = document.createElement('div');
    _.carousel.insertBefore(_.slidesContainer, _.slides[0]);
    _.slidesContainer.className += ' purejscarousel-slides-container';
    if (_.infinite === true) {
      _.slidesContainer.style.marginLeft = - (_.slides[0].offsetWidth * _.slides.length) + 'px';
     ...