JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="slider__window">
	
	<div class="slider__slider">

			<div class="slider__slide">
				<div class="el">1</div>
			</div>
			<div class="slider__slide">
				<div class="el">2</div>
			</div>
			<div class="slider__slide">
				<div class="el">3</div>
			</div>

	</div>
	
	
</div>

CSS

*,
*:after,
*:before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.slider__window {
	overflow: hidden;	
}

.slider__slider {
	display: flex;
}

.slider__slide {
	flex: 0 0 200px;
}

.el {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #fff;
	margin: 0 1em;
	background-color: #444;
	height: 160px;
}

JavaScript

var w = window,
    d = document,
    $html = d.documentElement,
    $body = d.body,
    qs = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelector(arg2);
        }

        return d.querySelector(arg1);
    },
    qsa = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelectorAll(arg2);
        }

        return d.querySelectorAll(arg1);
    },
    ael = function($el, evt, cb, uc) {
        if (!$el || !evt || !cb) return;

        if ($el !== w && $el.length) {
            $el.forEach(function($el) {
                $el.addEventListener(evt, cb, uc);
            });

            return true;
        }

        return $el.addEventListener(evt, cb, uc);
    };




//


var $slider__window = qs('.slider__window'),
	$slider__slider = qs('.slider__slider'),
	$slider__slides_group = qs('.slider__slides_group'),
	$slider__slideS = qsa('.slider__slide'),
	$slider__slide0 = $slider__slideS[0],
	
	total_slides = $slider__slideS.length;
	

var width_of_slider_window = $slider__window.offsetWidth,
	width_of_slide = $slider__slide0.offsetWidth,
	width_of_slides_combined = width_of_slide * total_slides,
	missing_occupation;
	
while ( missing_occupation = width_of_slider_window - width_of_slides_combined ) {
	
	$slider__slideS.forEach(function ( $slide ) {
		var $clone = $slide.cloneNode(true);
		$slider__slider.appendChild($clone);
		total_slides++;
	});
	
	width_of_slides_combined = width_of_slide * total_slides;
	
}