JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<div id="slider-container">
<ul class="bxslider">
<li>
<h3>“It’s a question of attitude. If you really work at something you can do it up to a point. If you really work at being happy you can do it up to a point. But anything more than that you can’t. Anything more than that is luck.”</h3>
<h2>Mark Smith in the New York Times</h2>
</li>
<li>
<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</h3>
<h2>Mark Smith, 1999</h2>
</li>
<li>
<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</h3>
<h2>Mark Smith, 1999</h2>
</li>
<li>
<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</h3>
<h2>Mark Smith, 1999</h2>
</li>
<li>
<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book....
CSS
ul li h3 {
color: #000000;
text-align: center;
text-transform: none;
font-weight: bold;
}
ul li h2 {
color: #000000;
text-align: right;
text-transform: none;
font-weight:normal;
margin-top: 30px;
}
ul li h1 {
color: #000000;
text-align: center;
text-transform: none;
font-weight:normal;
font-size: 11px;
}
JavaScript
var slider = $('.bxslider').bxSlider({
minSlides: '1',
maxSlides: '1',
slideWidth: '360',
slideMargin: 50,
auto: true,
infiniteLoop: true,
autoStart: true,
stopAuto: false,
autoControls: true,
speed: 2000,
pause:2000
});
$('.bx-pager-item a').click(function(e){
var i = $(this).index();
slider.goToSlide(i);
slider.stopAuto();
restart=setTimeout(function(){
slider.startAuto();
},2000);
return false;
});