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>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.silver.min.css">
<div id="mainContainer">
    <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>
            ...

CSS

.k-splitter {
    position: relative;
    height: 650px;
}
.k-splitbar-horizontal .k-icon {
    top: 15% !important;
}
#mainContainer #imagesPane, #mainContainer #imagesPreviewPane, #mainContainer #contentPane {
    padding:10px;
}
#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

var slider;
var pager;

var collateralSliderSettings = {
    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');
    }
};

var collateralPagerSettings = {
    mode: 'vertical',
    infiniteLoop: false,
    hideControlOnEnd: true,
    minSlides: 4,
    slideMargin: 10,
    pager: false,
};

function loadCollateralSlider() {
    slider = $('#bxslider').bxSlider(collateralSliderSettings);
    console.log("Load slider");
    pager = $('#bx-pager').bxSlider(collateralPagerSettings);
    console.log("Load pager");
}


function reloadCollateralSlider() {
    if (slider != null) {
        slider.destroySlider();
        slider.reloadSlider(collateralSliderSettings);
        console.log("ReLoad slider");
    }
    if (pager != null) {
        pager.destroySlider();
        pager.reloadSlider(collateralPagerSettings);
        console.log("ReLoad pager");
    }
}

//==============================================

$(document).ready(function () {

    $("#mainContainer").kendoSplitter({
        panes: [{
            size: "150px",
            resizable: false,
            collapsible: true
        }, {
            size: "40%",
            resizable: false,
            collapsible: true,
            collapsed: true
        }, {
            size: "40%",
            resizable: false,
            collapsible: true,
            collapsed: false
        }],
        layoutChange: reloadCollateralSlider
        //Comment "layoutChange" line to make it work partially
        // And Uncomment to see the Bug
    });

    loadCollateralSlider();
    $("#bx-pager a").click(function () {
        var splitter =...