JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="slider">
<ul class="bxslider">
  <li><img src="http://bxslider.com/images/170_200/trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/170_200/tree_root.jpg" /></li>
  <li><img src="http://bxslider.com/images/170_200/houses.jpg" /></li>
  <li><img src="http://bxslider.com/images/170_200/hill_road.jpg" /></li>
  <li><img src="http://bxslider.com/images/170_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/170_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/170_200/mountain.jpg" /></li>
  <li><img src="http://bxslider.com/images/170_200/houses.jpg" /></li>
</ul></div>

<h4>JS:</h4>
<pre><code data-language="javascript">$('.bxslider').bxSlider({
  minSlides: 4,
  maxSlides: 4,
  slideWidth: 170,
  slideMargin: 10,
  ticker: true,
  speed: 6000
});</code></pre>

JavaScript

$(document).ready(function(){
    
$('.bxslider').bxSlider({
onSliderLoad: function(){
    console.log("aa");
  },
  onSlideAfter: function(){
    console.log("aaaa");
  },
  minSlides: 4,
  maxSlides: 4,
  slideWidth: 170,
  slideMargin: 10,
  ticker: true,
  speed: 6000
});
  });