JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="bxslider">
  <div class="bxslider-inner"><div style="width:80px; height:80px; background:#CCC; padding:5px;" class="lshowcase-tooltip" title="Tooltip Example"></div></div>
 <div class="bxslider-inner"><div style="width:80px; height:80px; background:#f5f5f5; padding:5px;" class="lshowcase-tooltip" title="Tooltip Example"></div></div>
<div class="bxslider-inner"><div style="width:80px; height:80px; background:#6699cc; padding:5px;" class="lshowcase-tooltip" title="Tooltip Example"></div></div>
   <div class="bxslider-inner"><div style="width:80px; height:80px; background:#C5C5C5; padding:5px;" class="lshowcase-tooltip" title="Tooltip Example"></div></div>
</div>

CSS

.bxslider-inner {
   vertical-align: middle;
    display: inline-block;
    float: none !important;
}

JavaScript

jQuery('.bxslider').bxSlider({
    mode: 'horizontal',
	speed: 500,
	slideMargin:10,
	infiniteLoop: true,
    pager: false,
	controls: true,
    slideWidth: 80,
    minSlides: 1,
    maxSlides: 5,
    moveSlides: 1  		});
    
    //tooltip must load after so cloned slides also display it
      $('.lshowcase-tooltip').tooltip();