<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Slider - Cube Portfolio</title>

    <!-- load fonts from google -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700%7CRoboto:400,500,700%7CRoboto+Condensed%7CLato:400,700" rel="stylesheet" type="text/css">

    <!-- load css for cubeportfolio -->
    <link rel="stylesheet" type="text/css" href="../../cubeportfolio/css/cubeportfolio.min.css">
</head>
<body style="max-width: 760px; width: 97%; margin: 100px auto; min-height: 1000px;">
    <div id="js-grid-slider-thumbnail" class="cbp">
        <div class="cbp-item">
            <div class="cbp-caption">
                <div class="cbp-caption-defaultWrap">
                    <img src="http://scriptpie.com/cubeportfolio/img/?i=760x360/c7376c" alt="">
                </div>
            </div>
        </div>
        <div class="cbp-item">
            <div class="cbp-caption">
                <div class="cbp-caption-defaultWrap">
                    <img src="http://scriptpie.com/cubeportfolio/img/?i=760x360/4a7e96" alt="">
                </div>
            </div>
        </div>
        <div class="cbp-item">
            <div class="cbp-caption">
                <div class="cbp-caption-defaultWrap">
                    <img src="http://scriptpie.com/cubeportfolio/img/?i=760x360/cdc4c0" alt="">
                </div>
            </div>
        </div>
    </div>

    <div id="js-pagination-slider">
        <div class="cbp-pagination-item cbp-pagination-active">
            <img src="http://scriptpie.com/cubeportfolio/img/?i=380x250/2d3e6d" alt="">
        </div>
        <div class="cbp-pagination-item">
            <img src="http://scriptpie.com/cubeportfolio/img/?i=380x250/b08497" alt="">
        </div>
        <div class="cbp-pagination-item">
            <img src="http://scriptpie.com/cubeportfolio/img/?i=380x250/33cbc1" alt="">
        </div>
    </div>

    <!-- load jquery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- load cubeportfolio -->
    <script type="text/javascript" src="../../cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

    <!-- init cubeportfolio -->
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
