JSFiddle - React, Tailwind, and code Playground

HTML

<article class="salon_cvrs" id="banner-fade">                    	
                    	<ul class="bjqs">
                            <li>
                                <article class="saloon-box">
                                        <p>"test1"</p>
                                </article>
                                <article class="saloon-box">
                                        <p>"test2."</p>
                                </article>
                                <article class="saloon-box">
                                        <p>"test3."</p>
                                </article>
                                <article class="saloon-box">
                                    <article class="featured">
                                        <p>"test4"</p>
                                </article>
                            </li>
                            
                        <li>
                            <article class="saloon-box">
                                        <p>"test5"</p>
                            </article>
                            <article class="saloon-box">
                                <p>test6 </p>
                            </article>
                            <article class="saloon-box">
                                        <p>"test7"</p>
                            </article>
                            <article class="saloon-box">
                                <article class="featured">
                                        <p>"test8."</p>
                            </article>
                        </li>
                              <li>
                            <article class="saloon-box">
                                        <p>"test5"</p>
                            </article>
                            <article class="saloon-box">
                                <p>test6 </p>
                            </article>
                            <article...

CSS

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{background:url(http://www.urbancincy.com/wp-content/themes/urbancincy/img/bxSlider/btn_arrow_right.jpg) no-repeat; width:45px;height:53px;right:0px}
ul.bjqs-controls.v-centered li.bjqs-prev a{background:url(http://www.urbancincy.com/wp-content/themes/urbancincy/img/bxSlider/btn_arrow_left.jpg) no-repeat; width:45px;height:53px;left:0px;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
.salon_cvrs{
 width:500px;
    margin:0 auto;
    float:none;
    background:#ccc;
}
#banner-fade,
#banner-slide{
	margin-bottom: 0px;
}
ul.bjqs-controls.v-centered li a{
	display:block;
	padding:0px;
	text-indent:-9999px;
	background:#fff;
	color:#000;
	text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
	opacity:0.6;
}

ol.bjqs-markers li a{
	padding:5px 10px;
	background:#000;
	color:#fff;
	margin:5px;
	text-decoration: none;
}

ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{
	background: #999;
}

p.bjqs-caption{
	background: rgba(255,255,255,0.5);
}
#content-cont .top-saloon{
  border: 1px solid #C1C1C1;
  float: left;
  height: auto;
  margin: 0 2%;
  max-width: 96%;
  overflow: hidden;
}
#content-cont .top-saloon .saloon-box p {
  clear: left;
  color: #000;
  float: left;
  font: 12px/20px 'robotoregular',Arial,Helvetica,sans-serif;
  padding: 0;
  width: 100%;
}

JavaScript

/*
 * Basic jQuery Slider plug-in v.1.3
 *
 * http://www.basic-slider.com
 *
 * Authored by John Cobb
 * http://www.johncobb.name
 * @john0514
 *
 * Copyright 2011, John Cobb
 * License: GNU General Public License, version 3 (GPL-3.0)
 * http://www.opensource.org/licenses/gpl-3.0.html
 *
 */

;(function($) {

    "use strict";

    $.fn.bjqs = function(o) {
        
        // slider default settings
        var defaults        = {

            // w + h to enforce consistency
            width           : 700,
            height          : 300,

            // transition valuess
            animtype        : 'fade',
            animduration    : 450,      // length of transition
            animspeed       : 4000,     // delay between transitions
            automatic       : true,     // enable/disable automatic slide rotation

            // control and marker configuration
            showcontrols    : true,     // enable/disable next + previous UI elements
            centercontrols  : true,     // vertically center controls
            nexttext        : 'Next',   // text/html inside next UI element
            prevtext        : 'Prev',   // text/html inside previous UI element
            showmarkers     : true,     // enable/disable individual slide UI markers
            centermarkers   : true,     // horizontally center markers

            // interaction values
            keyboardnav     : true,     // enable/disable keyboard navigation
            hoverpause      : true,     // enable/disable pause slides on hover

            // presentational options
            usecaptions     : true,     // enable/disable captions using img title attribute
            randomstart     : false,     // start from a random slide
            responsive      : false     // enable responsive behaviour

        };

        // create settings from defauls and user options
        var settings        = $.extend({}, defaults, o);

        // slider elements
        var...