JSFiddle - React, Tailwind, and code Playground

by dhana36

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<button id="prev">Prev</button>
<button id="next">Next</button>
<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>
<ul class="bxslider1">
  <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>

JavaScript

var bxslider=$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});
var bxslider1=$('.bxslider1').bxSlider({
  mode: 'fade',
  captions: true
});
$('#prev').on('click', function(){
    bxslider.goToPrevSlide();
    bxslider1.goToPrevSlide();
});
$('#next').on('click', function(){
    bxslider.goToNextSlide();
    bxslider1.goToNextSlide();
});
$('.bx-prev').on('click', function(){
    bxslider.goToPrevSlide();
    bxslider1.goToPrevSlide();
});
$('.bx-next').on('click', function(){
    bxslider.goToNextSlide();
    bxslider1.goToNextSlide();
});