JSFiddle - React, Tailwind, and code Playground

by aasthatuteja

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div id="imagesPane">
    <div id="bx-pager"> <a data-slide-index="0" href="">
            <h3>Test Heading 1</h3>
            <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" />
        </a>
 <a data-slide-index="1" href="">
            <h3>Test Heading 2</h3>
            <img src="http://www.st-andrews.ac.uk/nightline/wp-content/uploads/puppies.jpeg" />
        </a>
 <a data-slide-index="2" href="">
            <h3>Test Heading 3</h3>
            <img src="http://offleashk9training.com/dogtrainingblog/wp-content/uploads/2014/04/Sweet-puppy-with-bunny-puppies-14749075-1600-1200.jpg" />
        </a>
 <a data-slide-index="3" href="">
            <h3>Test Heading 4</h3>
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQPfwj_i99CRiA2pzjR0XRXinpfABv_4BtIwm0E8near7BQO_A" />
        </a>
 <a data-slide-index="4" href="">
            <h3>Test Heading 5</h3>
            <img src="http://imagesofpuppies.org/wp-content/uploads/2013/11/Puppy-Wallpaper.jpg" />
        </a>
 <a data-slide-index="5" href="">
            <h3>Test Heading 6</h3>
            <img src="http://static.ddmcdn.com/gif/labs-too-cute-puppies-03-625x450-1.jpg" />
        </a>

    </div>
</div>
<!-- ****************************** Preview Pane Begins ****************************************** -->
<div id="imagesPreviewPane">
    <ul id="bxslider">
        <li>
             <h3>Test Heading 1</h3>

            <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" />
        </li>
        <li>
             <h3>Test Heading 2</h3>
            <img src="http://www.st-andrews.ac.uk/nightline/wp-content/uploads/puppies.jpeg" />
        </li>
        <li>
             <h3>Test Heading 3</h3>
            <img...

CSS

#imagesPane, #imagesPreviewPane {
    border: 5px solid #666;
    display:inline-block;
    width:200px;
    height:600px;
    padding:10px;
    vertical-align:top;
}
#imagesPreviewPane {
    width:500px;
}
#imagesPane .bx-wrapper img {
    max-height: 120px;
    max-width: 110px;
    margin: 7px auto;
}
#bx-pager {
    height: 100%;
}
#bx-pager a {
    vertical-align: middle;
    display: block;
    height: 23%;
    min-height: 100px;
    
    padding: 0;
}
#imagesPane .bx-wrapper {
    top: 30px;
    height: 92%;
}
#imagesPane .bx-wrapper a {
    opacity: 0.6;
}
#imagesPane .bx-wrapper a.active-caption {
    opacity: 1;
}
#imagesPreviewPane .bx-wrapper {
    top: 0;
    height: 100%;
}
#imagesPreviewPane .bx-wrapper h2, #imagesPane .bx-wrapper h3 {
    margin: 0 10px;
    font-size: 100%;
}
.bx-wrapper img {
    max-width: 80%;
    margin: 0 auto;
}
.bx-wrapper ul, .bx-wrapper li {
    margin: 0;
    padding: 0;
}
#imagesPane .bx-wrapper a.bx-prev, #imagesPane .bx-wrapper a.bx-next {
    left: 35%;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Opera, Chrome, and Safari */
}
#imagesPane .bx-wrapper a.bx-prev {
    top: -20px;
    opacity: 0.7
}
#imagesPane .bx-wrapper a.bx-next {
    top: auto;
    bottom: -10px;
    opacity: 0.7
}
#imagesPane .bx-wrapper a.bx-prev:hover, #imagesPane .bx-wrapper a.bx-next:hover {
    opacity: 1;
}
#imagesPane .bx-wrapper .bx-controls-direction a.disabled, #imagesPane .bx-wrapper .bx-controls-direction a.disabled:hover {
    display: block;
    opacity: 0.3;
}

JavaScript

$(document).ready(function () {
        $('#bxslider').bxSlider({
            pagerCustom: '#bx-pager',
            mode: 'fade',
            onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                console.log(currentSlideHtmlObject);
                $('.active-caption').removeClass('active-caption');
                $('#bx-pager>a').eq(currentSlideHtmlObject).addClass('active-caption');
            },
            onSliderLoad: function () {
                $('#bx-pager>a').eq(0).addClass('active-caption');
            },

        });

        $('#bx-pager').bxSlider({
            mode: 'vertical',
            infiniteLoop: false,
            hideControlOnEnd: true,
            minSlides: 4,
            slideMargin: 10,
            pager: false,
        });
    });