demo/custom-style-2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>bamboo demo</title>
    <link rel="stylesheet" type="text/css" href="css/bamboo.css">
    <script type="text/javascript" src="js/bamboo.js"></script>
    <style type="text/css">
    .demo {
        margin: auto;
        width: 500px;
        height: 250px;
        overflow: hidden;
        border: 10px solid #fefefe;
        box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, .1);
    }

    .out-nav {
        text-align: center;
    }

    .out-nav>i {
        display: inline-block;
        margin: 4px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #aaa;
    }

    .out-nav>i.focus {
        background: #ff0;
    }

    .out-btn {
        text-align: center;
    }

    .out-btn>button {
        margin: 2px;
        width: 100px;
        height: 35px;
        outline: 0;
        border: 0;
        background: #479FA4;
        color: #fefefe;
        font-size: 14px;
        border-radius: 4px;
        border-top: 2px solid #76C3C1;
        border-bottom: 2px solid #404E4F;

    }

    .out-arrow>button:hover {
        background: #378F94;
    }
    </style>
</head>

<body>
    <div class="demo">
        <div class="slides">
            <div><img src="img/1.jpg"></div>
            <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/6.jpg"></div>
            <div><img src="img/7.jpg"></div>
        </div>
    </div>
    <div>
        <div class="out-nav">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div class="out-btn">
            <button class="out-prev">prev</button>
            <button class="out-next">next</button>
        </div>
    </div>
    <script type="text/javascript">
    var element = document.querySelector('.demo');
    var sildeshow = bamboo(element, 'fade', {
        dots: document.querySelector('.out-nav'),
        prev: document.querySelector('.out-prev'),
        next: document.querySelector('.out-next'),
    });
    </script>
</body>

</html>