JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.css">
<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <ul class="bxslider">
        <li><img src="http://bxslider.com/images/home_slides/picto.png" /></li>
        <li><img src="http://bxslider.com/images/home_slides/houses.jpg" /></li>
        <li><img src="http://bxslider.com/images/home_slides/hillside.jpg" /></li>
      </ul>
    </div>
  </div>
</div>

CSS

.bx-wrapper .bx-controls-direction a {
  display: none;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #ccc;
}

JavaScript

var slider = $('.bxslider').bxSlider({
  auto: true,
  pause: 2000
});
$(".bx-pager-link").click(function() {
  console.log('bla');
  slider.stopAuto();
  slider.startAuto();
});