JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://robbiestewart.ca/torontographic/wordpress/mouseSwipe/jquery.easing.1.3.js"></script>
<script src="http://robbiestewart.ca/torontographic/wordpress/mouseSwipe/jquery.mouseSwipe.js"></script>
<div id="viewport">
    <div id="mouseSwipe2">
        <div class="panel">
            <div class="image-wrap">
                <img src="http://placekitten.com/300/225" />
                <div class="post-title">TITLE</div>
                <div class="post-content">TEXT GOES HERE</div>
            </div>
        </div>
        <div class="panel">
            <div class="image-wrap">
                <img src="http://placekitten.com/300/225" />
            </div>
        </div>
        <div class="panel">
            <div class="image-wrap">
                <img src="http://placekitten.com/300/225" />
            </div>
        </div>
        <div class="panel">
            <div class="image-wrap">
                <img src="http://placekitten.com/300/225" />
            </div>
        </div>
        <div class="panel">
            <div class="image-wrap">
                <img src="http://placekitten.com/300/225" />
            </div>
        </div>
    </div>
</div>

CSS

/*
RESETS ------------------------
*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align:;
    background: transparent;
}
/*
RESETS END --------------------
*/
 #viewport {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0px;
    overflow: hidden;
}
#mouseSwipe1, #mouseSwipe2, #slideshow {
    -webkit-user-select: none;
    -moz-user-select: none;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0px;
    cursor: pointer;
}
.panel {
    margin: 0px;
    padding: 0px;
    width: 500px;
    height: auto;
    background-color: silver;
    overflow: hidden;
}
.image-wrap {
    padding: 10px;
}
.panel img {
    width: 100%;
}
.post-title {
    position: relative;
    width: 100%; height: auto;
    margin-top: -30px;
    font-size: 50px;
    text-align: center;
}
.post-content {
    position: relative;
    width: 100%; height: auto;
    margin-top: 30px;
    font-size: 13px;
    text-align: center;
    display: none;
}

JavaScript

$(document).ready(function () {
    setTimeout(function () {

        $(document).bind("dragstart", function () {
            return false;
        });

        $('#mouseSwipe2').swipe({
            TYPE: 'panelSwipe',
            HORIZ: true,
            SNAPDISTANCE: 20,
            DURATION: 750,
            EASING: 'easeOutBack',
            PAGENUM: '#pagenum2'
        });

    }, 200);
});


$(document).ready(function () {

    var divwid = $(window).width();
    $('.panel').css({
        'width': divwid
    });

});

    $(document).ready(function () {
        $('.image-wrap').click(function () {
            $(this).children('.post-content').fadeIn();
        });
    });