JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="wrapper">
<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
</div>

CSS

.wrapper {
    width:500px;
    margin: 50px auto;
}
.bxslider {
    margin:0;
    padding:0;
}

JavaScript

$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});