JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<h1>NETFLIX SLIDER BY <b>Andrea Maranesi</b></h1>
<div class='s_container'>
<div class='slider'>
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  
   <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video preload='none'>
    <source src=''></video></div>
  </div>
  
   <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  <div class='element'>
    <div class='video_container'>
      <div class='v_preloader'></div>
  <video>
    <source src=''></video></div>
  </div>
  <div class='element'>
    <div class='video_container'>
      <div...

CSS

@import url("https://fonts.googleapis.com/css?family=Oswald");
body {
  overflow-x: hidden;
  margin: 0;
  background: #222;
}
body h1 {
  text-align: center;
  font-size: 27px;
  line-height: 27px;
  color: #fff;
  font-weight: 300;
  font-family: 'Oswald', sans-serif;
}
body h1 b {
  font-weight: 500;
}

.s_container {
  position: relative;
}

.slider {
  transition: all 0.2s linear;
  position: relative;
  margin: 0;
  top: 0;
  left: 0;
  width: 3000vw;
  display: table;
  margin-top: 100px;
}
.slider .element {
  position: relative;
  display: inline-block;
  margin: 0 1px;
  vertical-align: top;
  width: 240px;
  height: 135px;
  background: #101010;
  cursor: pointer;
  transition: all 0.2s linear;
}
@media screen and (max-width: 400px) {
  .slider .element {
    width: 120px;
    height: 120px;
  }
}
.slider .element .video_container {
  display: block;
  position: absolute;
  width: 100%;
  right: 0;
  transition: none;
  top: 0;
  z-index: 1;
  height: 100%;
  background: #101010;
}
.slider .element .video_container .v_preloader {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: url(https://cdn.dribbble.com/users/1148781/screenshots/3233207/bold-preloader.gif) no-repeat center center #101010;
  background-size: contain;
}
.slider .element .video_container::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}
.slider .element .video_container video {
  object-fit: contain;
  appearance: none;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -1;
  position: absolute;
}
.slider .element.focus, .slider .element.firstFocus {
  z-index: 9999;
}
.slider .element.focus {
  transform: scale(1.5);
}
.slider .element.pfocus {
  transform: translateX(70px);
}
.slider .element.bfocus {
  transform: translateX(-70px);
}
.slider .element.fpfocus {
  transform: translateX(70px);
}
.slider...

JavaScript

(function($) {
    var f_name = 'netflix_slider';

    $.fn.init[f_name] = function(element, options) {
        var original_width = 0;
        if ($(window).width() > 400) {
            original_width = '240px';
        } else {
            original_width = '120px';
        }
        var def = {
            width: false,
            ratio: 1,
            url: [],
            width: original_width,
            videourl: ['https://storage.googleapis.com/coverr-main/mp4/Tourism.mp4', 'https://staging.coverr.co/s3/mp4/Snow-motion.mp4', 'https://staging.coverr.co/s3/mp4/Indian Tea Plantations.mp4', 'https://staging.coverr.co/s3/mp4/Hill.mp4', 'https://staging.coverr.co/s3/mp4/Flamez.mp4', 'https://staging.coverr.co/s3/mp4/Breezy.mp4', 'https://staging.coverr.co/s3/mp4/Candolim-Beach.mp4', 'https://staging.coverr.co/s3/mp4/Beetle-Nut-Trees.mp4', 'https://staging.coverr.co/s3/mp4/Wavez.mp4', 'https://staging.coverr.co/s3/mp4/Ski_Train.mp4', 'https://staging.coverr.co/s3/mp4/Cloud_Spots.mp4', 'https://staging.coverr.co/s3/mp4/Mt_Baker.mp4']
        };
        options = $.extend(def, options);
        var e_width = options['width'];
        var parent = $(element);
        var elements = parent.find('.element');
        var videourl = options['videourl'];
        var allT = 0;
        var scroll_elements = 0;
        var max_scr = 0;

        function translateX(el, X) {
            $(el).css('transform', 'translateX(' + X + 'px)');
        }
        if (elements.length > 0 && videourl.length > 0) {

            function putFocus(el, p, action, min) {
                el = $(el);
                var tr = parseInt(e_width) * 0.25;
                var lg_max = elements.length;
                var lg_min = 0;
                if (scroll_elements < max_scr) {
                    lg_max = (scroll_elements + 1) * min;

                    lg_min = (scroll_elements) * min;
                }

                if ((p + 1) % min == 0 && max_scr > 0) {
                   ...