JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<ul class="bxslider">
  <li><img src="http://www.fillmurray.com/200/200" /></li>
  <li><img src="http://www.fillmurray.com/300/300" /></li>
  <li><img src="http://www.fillmurray.com/250/250" /></li>
  <li><img src="http://www.fillmurray.com/350/350" /></li>
  <li><img src="http://www.fillmurray.com/220/220" /></li>
  <li><img src="http://www.fillmurray.com/370/370" /></li>
  <li><img src="http://www.fillmurray.com/280/280" /></li>
  <li><img src="http://www.fillmurray.com/350/350" /></li>
</ul>

JavaScript

$('.bxslider').bxSlider({
  auto: true, // auto play
  adaptiveHeight: true, // adjusts the slide height
  mode: 'fade', // transitions
  randomStart: true,
  controls: false
});