JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="https://rawgit.com/WickyNilliams/enquire.js/master/dist/enquire.min.js"></script>
<script src="https://rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js"></script>
<script src="https://rawgit.com/scottjehl/picturefill/master/dist/picturefill.min.js"></script>
<div class="wrapper">

<ul class="bxslider">
  

<li><div class="ratio">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allowfullscreen></iframe>
  </div></li>
  <li><img src="//placehold.it/228x114/038b19/FFFFFF" title="The long and winding road" /></li>
  <li><img src="//placehold.it/228x114/210aad/FFFFFF" title="Happy trees" /></li>
</ul>
</div>

SCSS

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

* {
  margin: 0;
  padding: 0;
}

.bx-viewport li {
  min-height: 1px;
  min-width: 1px;
}

.bx-button button {
  padding: 0;
  background: none;
}

img {
  max-width: 100%;
  height: auto;
}

html,
body {
  height: 100%;
}

.diaporama {
  position: absolute;
  left: 0;
  z-index: 1;
  padding: 20px;
  background: rgba(0, 0, 0, 0.75);
}

@media screen and (min-width:601px) {
  .diaporama {
    top: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 190px;
    height: 100%;
  }
  /* État actif */
  .diaporama__pager-link.active:before,
  .diaporama__pager-link.is-active:before {
    border-width: 8px;
  }
}

.diaporama__pager {
  list-style: none;
}

.diaporama__item {
  position: relative;
}

.diaporama__item:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}

.diaporama__item:not(:last-child) {
  margin-bottom: 10px;
}

.diaporama__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.diaporama__link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0 solid white;
  transition: border 0.3s ease-out;
}

.diaporama__link > img {
  border: 1px solid white;
}

@media screen and (max-width:600px) {
  .diaporama {
    bottom: 0;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .diaporama > div {
    position: relative;
    display: inline-block;
    padding: 10px;
  }
  .diaporama.is-launched > div {
    padding-left: 70px;
    padding-right: 70px;
  }
  .diaporama {
    height: 100px;
    overflow: hidden;
    z-index: 0;
  }
  .diaporama > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .diaporama.is-launched,
  .loaded .diaporama {
    height: auto;
    overflow: visible;
  }
  .diaporama.is-launched > div,
  .loaded .diaporama > div {
    position: relative;
  }
...

JavaScript

/**
 * bxSlider v4.2.5 - Modified by Alteo
 * Copyright 2013-2015 Steven Wanderski
 * Written while drinking Belgian ales and listening to jazz

 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */

;(function($) {

  var defaults = {

    // GENERAL
    mode: 'horizontal',
    slideSelector: '',
    infiniteLoop: true,
    hideControlOnEnd: false,
    speed: 500,
    easing: null,
    slideMargin: 0,
    startSlide: 0,
    randomStart: false,
    captions: false,
    ticker: false,
    tickerHover: false,
    adaptiveHeight: false,
    adaptiveHeightSpeed: 500,
    video: false,
    useCSS: true,
    preloadImages: 'visible',
    responsive: true,
    slideZIndex: 50,
    wrapperClass: 'bx-wrapper',

    // TOUCH
    touchEnabled: true,
    swipeThreshold: 50,
    oneToOneTouch: true,
    preventDefaultSwipeX: true,
    preventDefaultSwipeY: false,

    // ACCESSIBILITY
    ariaLive: true,
    ariaHidden: true,

    // KEYBOARD
    keyboardEnabled: false,

    // PAGER
    pager: true,
    pagerType: 'full',
    pagerShortSeparator: ' / ',
    pagerSelector: null,
    buildPager: null,
    pagerCustom: null,

    // CONTROLS
    controls: true,
    nextText: 'Next',
    prevText: 'Prev',
    nextSelector: null,
    prevSelector: null,
    autoControls: false,
    startText: 'Start',
    stopText: 'Stop',
    autoControlsCombine: false,
    autoControlsSelector: null,

    // AUTO
    auto: false,
    pause: 4000,
    autoStart: true,
    autoDirection: 'next',
    stopAutoOnClick: false,
    autoHover: false,
    autoDelay: 0,
    autoSlideForOnePage: false,

    // CAROUSEL
    minSlides: 1,
    maxSlides: 1,
    moveSlides: 0,
    slideWidth: 0,
    shrinkItems: false,

    // CALLBACKS
    onSliderLoad: function() { return true; },
    onSlideBefore: function() { return true; },
    onSlideAfter: function() { return true; },
    onSlideNext: function() { return true; },
    onSlidePrev: function() { return true; },
    onSliderResize: function() {...