JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<body>
    <!--#########################JQM#########################-->
    <div class="container-fluid" id="demo-page" data-url="demo-page">
        <div data-role="panel" id="left-panel" data-theme="b">
            <p>Left reveal panel.</p> <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a>

        </div>
        <!-- /panel -->
        <div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="b">
            <p>Right push panel.</p> <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>

        </div>
        <!-- /panel -->
        <!--#########################//JQM#########################-->
        <!--#########################Bx slider#########################-->
        <section class="row col-lg-10" style="float: none; margin: 0 auto;">
            <ul class="bxslider">
                <li>
                    <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
                </li>
                <li>
                    <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
                </li>
                <li>
                    <img src="http://bxslider.com/images/730_200/houses.jpg" />
                </li>
                <li>
                    <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
                </li>
                <li>
                    <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
                </li>
                <li>
                   ...

JavaScript

$(document).on("pagecreate", function () {
    $(document).on("swipe", function (e) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        //if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" )
        if ($(".ui-page-active").jqmData("panel") !== "open" &&  $(e.target).closest(".bxslider").length === 0) {
            if (e.type === "swipe") {
                $("#right-panel").panel("open");
            } else if (e.type === "swipe") {
                $("#left-panel").panel("open");
            }
        }
        console.log(e.target)
    });
});


$(document).ready(function () {

    $('.bxslider').bxSlider({
        mode: 'horizontal',
        captions: true,
        auto: true,
        touchEnabled: true,
        oneToOneTouch: true,
        /* controls: false,*/
        pager: false,
        speed: 200
    });

});