JSFiddle - React, Tailwind, and code Playground

by motocomdigital

HTML

<script src="http://gridmedia-blogger-templates.googlecode.com/files/jquery.bxSlider.min.js"></script>
<div id="banner">
            
                <div class="banner-nav">
            
                    <div class="banner-pager">
                    
                      <a href="">Dubery Wotsit</a>
                      <a href="">Laterz on a'menjey</a>
                      <a href="">Joben</a>
                      <a href="">Tukka Tukka</a>
                      <a href="">Horse Hair Duvet</a>
                      <a href="">FML</a>
                      <a href="">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 Deep</div>
                        </li>    
            
    ...

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.pager-active,
.banner-pager a:hover {
    background: #e5e5e5;    
}

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

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

JavaScript

$(function() {

    // assign the slider to a variable
    var slider = $('#banner-slider').bxSlider({
        controls: false,
        mode: 'vertical',
        auto: true
    });

    // assign a click event to the external thumbnails
    $('.banner-pager a').click(function() {
        var thumbIndex = $('..banner-pager a').index(this);
        // call the "goToSlide" public function
        slider.goToSlide(thumbIndex);

        // remove all active classes
        $('.banner-pager a').removeClass('pager-active');
        // assisgn "pager-active" to clicked thumb
        $(this).addClass('pager-active');
        // very important! you must kill the links default behavior
        return false;
    });

    // assign "pager-active" class to the first thumb
    $('.banner-pager a:first').addClass('pager-active');

});