JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider_mini" style="position:relative;bottom:0px;">
							<div id="bx-pager">
							  <a data-slide-index="0" href="image.jpg" class="imgz"><img style="width:130px;height:104px;" src="image.jpg"/></a>
							  <a data-slide-index="1" href="image2.jpg" class="imgz"><img style="width:130px;height:104px;" src="image2.jpg"/></a>
							  <a data-slide-index="2" href="image3.jpg" class="imgz"><img style="width:130px;height:104px;" src="image3.jpg"/></a>
							</div>							
						</div>

JavaScript

$(document).ready(function(){

			$('.imgz').colorbox({rel:'.imgz'});
			
			$('.bxslider.two').bxSlider({
				pagerCustom: '#bx-pager'
			});

			$('#bx-pager').bxSlider({
				slideWidth: 130,
			    minSlides: 2,
			    maxSlides: 3,
			    moveSlides: 1,
			    slideMargin: 10
			});

			


		});