Click here to go to jPanel's Github page.

<!--Default jPanel usage-->
<div class="jpanel-root" data-jp-root="default">
    <div class="jpanel-node">
        <h1>Default jPanel Usage</h1>
        <p>
            <span class="jpanel-transition" data-jp-go-to="prev">Previous</span>
            <span class="jpanel-transition" data-jp-go-to="next">Next</span>
        </p>
    </div>
    <div class="jpanel-node">
        <h1>This functions as a basic slider</h1>
        <p>
            <span class="jpanel-transition" data-jp-go-to="prev">Previous</span>
            <span class="jpanel-transition" data-jp-go-to="next">Next</span>
        </p>
    </div>
</div>

<!--Vertical slide axis with device grouping-->
<div class="jpanel-root"
     data-jp-root="vertical"
     data-jp-slide-axis="y">
    <div class="jpanel-node">
        <h1>Let's change the slide axis now...</h1>
        <p>
            <span class="jpanel-transition" data-jp-go-to="prev">Previous</span>
            <span class="jpanel-transition" data-jp-go-to="next">Next</span>
        </p>
    </div>
    <div class="jpanel-node" data-jp-group-in-device="desktop">
        <div class="jpanel-node">
            <h1>While we're at it, let's group this on desktops.</h1>
            <p class="jpanel-hide-on-desktop">
                <span class="jpanel-transition" data-jp-go-to="prev">Previous</span>
                <span class="jpanel-transition" data-jp-go-to="next">Next</span>
            </p>
        </div>
        <div class="jpanel-node">
            <h1>Try shrinking the window!</h1>
            <p>
                <span class="jpanel-transition" data-jp-go-to="prev">Previous</span>
                <span class="jpanel-transition" data-jp-go-to="next">Next</span>
            </p>
        </div>
    </div>
</div>