JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<div id="banner">
            
                <div class="banner-nav">
                    <div class="banner-pager">
                    
                      <a data-slide-index="0">Dubery Wotsit</a>
                      <a data-slide-index="1">Laterz on a'menjey</a>
                      <a data-slide-index="2">Joben</a>
                      <a data-slide-index="3">Tukka Tukka</a>
                      <a data-slide-index="4">Horse Hair Duvet</a>
                      <a data-slide-index="5">FML</a>
                      <a data-slide-index="6">Balls Deep</a>
                      
                    </div>
                    
                </div>
                
                <div class="banner-wrap">
                
                    <ul id="banner-slider">
                    
                        <li style="background: #FF0000;">
                            <div class="banner-slide">Dubery Wotsit</div>
                        </li>    
                        <li style="background: #FF8000;">
                            <div class="banner-slide">Laterz on a'menjey</div>
                        </li>    
                        <li style="background: #FFFF00;">
                            <div class="banner-slide">Joben</div>
                        </li>    
                        <li style="background: #80FF00;">
                            <div class="banner-slide">Tukka Tukka</div>
                        </li>    
                        <li style="background: #00FF00;">
                            <div class="banner-slide">Horse Hair Duvet</div>
                        </li>    
                        <li style="background: #00FF80;">
                            <div class="banner-slide">FML</div>
                        </li>    
                        <li style="background: #00FFFF;">
                            <div class="banner-slide">Balls...

CSS

#banner {
    height: 294px;
    width: 100%;
    position: relative;
    background: #e5e5e5;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    overflow: hidden;
}

.banner-nav {
    max-width: 260px;
    width: auto;
    height: 294px;
    float: left;
    position: relative;
    background: #cccccc;
    position: absolute;
}

.banner-pager a {
    width: 220px;
    display: block;
    float: left;
    height: 18px;
    padding: 12px 20px;
}

.banner-pager a.active,
.banner-pager a:hover {
    background: #e5e5e5;    
}

.banner-wrap {
    float: left;
    height: 294px;
    padding-left: 260px;
}

.banner-slide {
    height: 294px;
    width: 720px;    
}

JavaScript

$ = jQuery;
$(window).load(function() {
    $('#banner-slider').bxSlider({
        controls: false,
        mode: 'vertical',
        auto: true,
        pagerCustom: $('.banner-pager'),
        pause: 500,
    });
});