JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js"></script>
<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="diaporama">
  <div>
    <div class="bx-button diaporama__button diaporama__button--prev" title="Prev"></div>
    <ul class="js-diaporama-thumbs diaporama__pager">
      <li class="diaporama__item">
        <a href="#" class="diaporama__link">
          <img data-sizes="(min-width:1101px) 228px,
										(min-width:720px) 150px,
										(min-width:501px) 130px,
										100px" data-srcset="//placehold.it/100x50/000000/FFFFFF 100w,
										//placehold.it/130x65/000000/FFFFFF 130w,
										//placehold.it/150x75/000000/FFFFFF 150w,
										//placehold.it/228x114/000000/FFFFFF 228w" alt="" class="lazyload">
        </a>
      </li>
      <li class="diaporama__item">
        <a href="#" class="diaporama__link">
          <img data-sizes="(min-width:1101px) 228px,
										(min-width:720px) 150px,
										(min-width:501px) 130px,
										100px" data-srcset="//placehold.it/100x50/210aad/FFFFFF 100w,
										//placehold.it/130x65/210aad/FFFFFF 130w,
										//placehold.it/150x75/210aad/FFFFFF 150w,
										//placehold.it/228x114/210aad/FFFFFF 228w" alt="" class="lazyload">
        </a>
      </li>
      <li class="diaporama__item">
        <a href="#" class="diaporama__link">
          <img data-sizes="(min-width:1101px) 228px,
										(min-width:720px) 150px,
										(min-width:501px) 130px,
										100px" data-srcset="//placehold.it/100x50/038b19/FFFFFF 100w,
										//placehold.it/130x65/038b19/FFFFFF 130w,
										//placehold.it/150x75/038b19/FFFFFF 150w,
										//placehold.it/228x114/038b19/FFFFFF 228w" alt="" class="lazyload">
        </a>
     ...

CSS

*,
*: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

var pause = 9000,
  speed = 800,
  diaporamaCarousel = $(".js-diaporama-thumbs"),
  $diaporamaCarouselItem = diaporamaCarousel.find(".diaporama__item:not(.bx-clone)"),
  diaporamaCarouselPrev = $('.diaporama__button--prev'),
  diaporamaCarouselNext = $('.diaporama__button--next'),
  diaporamaCarouselOptions = {
    desktop: {
      speed: speed,
      auto: false,
      stopAuto: true,
      pause: pause,
      mode: 'vertical',
      controls: true,
      prevSelector: diaporamaCarouselPrev,
      nextSelector: diaporamaCarouselNext,
      prevText: "<",
      nextText: ">",
      pager: false,
      slideMargin: 10,
      minSlides: 3,
      maxSlides: 3,
      moveSlides: 1,
      onSliderLoad: function() {
      	console.log('desktop');
        $('.diaporama').addClass("is-launched");
      }
    },
    mob: {
      speed: speed,
      auto: false,
      stopAuto: true,
      pause: pause,
      mode: 'horizontal',
      controls: true,
      prevSelector: diaporamaCarouselPrev,
      nextSelector: diaporamaCarouselNext,
      prevText: "<",
      nextText: ">",
      pager: false,
      slideWidth: 150,
      slideMargin: 10,
      minSlides: 2,
      maxSlides: 2,
      moveSlides: 1,
      onSliderLoad: function() {
      	console.log('mob');
        $('.diaporama').addClass("is-launched");
      }
    }
  };

enquire.register("only screen and (min-width:601px)", {
  match: function() {
  console.log('desktop')
    if ($diaporamaCarouselItem.length > 3) {
    if(diaporamaCarousel.reloadSlider){
     	diaporamaCarousel.reloadSlider(diaporamaCarouselOptions.desktop);
    } else {
    diaporamaCarousel.bxSlider(diaporamaCarouselOptions.desktop);
    }
     
    } else {
      diaporamaCarousel.destroySlider();
      $('.diaporama').removeClass("is-launched");
    }
  }
}).register("only screen and (max-width:600px)", {
  match: function() {
    console.log('mob')
  if ($diaporamaCarouselItem.length > 3) {
  if(diaporamaCarousel.reloadSlider){
    ...