<style>

.frame{height:250px;line-height:250px;overflow:hidden}

.frame ul{list-style:none;margin:0;padding:0;height:100%;font-size:50px}

.frame ul li{float:left;width:227px;height:100%;margin:0 1px 0 0;padding:0;background:#333;color:#ddd;text-align:center;cursor:pointer}

.frame ul li.active{color:#fff;background:#a03232}

.scrollbar{margin:0 0 1em 0;height:2px;background:#ccc;line-height:0}

.scrollbar .handle{width:100px;height:100%;background:#292a33;cursor:pointer}

.scrollbar .handle .mousearea{position:absolute;top:-9px;left:0;width:100%;height:20px}

.pages{list-style:none;margin:20px 0;padding:0;text-align:center}

.pages li{display:inline-block;width:14px;height:14px;margin:0 4px;text-indent:-999px;border-radius:10px;cursor:pointer;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}

.pages li:hover{background:#aaa}

.pages li.active{background:#666}

.controls{margin:25px 0;text-align:center}

.oneperframe{height:300px;line-height:300px}

.oneperframe ul li{width:1140px}

.oneperframe ul li.active{background:#333}

.crazy ul li:nth-child(2n){width:100px;margin:0 4px 0 20px}

.crazy ul li:nth-child(3n){width:300px;margin:0 10px 0 5px}

.crazy ul li:nth-child(4n){width:400px;margin:0 30px 0 2px}

</style>

<div class="scrollbar">

    <div class="handle">

        <div class="mousearea"></div>

    </div>

</div>

<div class="frame" id="basic">

    <ul class="clearfix">

        <li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>

        <li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>

        <li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li>

        <li>28</li><li>29</li>

    </ul>

</div>

<ul class="pages"></ul>

<div class="controls center">

    <button class="btn prevPage"><i class="fa fa-angle-double-left"></i> page</button>

    <button class="btn prev"><i class="fa fa-angle-left"></i> item</button>

    <button class="btn backward"><i class="fa fa-angle-left"></i> move</button>

    <div class="btn-group">

        <button class="btn toStart">toStart</button>

        <button class="btn toCenter">toCenter</button>

        <button class="btn toEnd">toEnd</button>

    </div>

    <div class="btn-group">

        <button class="btn toStart" data-item="10"><strong>10</strong> toStart</button>

        <button class="btn toCenter" data-item="10"><strong>10</strong> toCenter</button>

        <button class="btn toEnd" data-item="10"><strong>10</strong> toEnd</button>

    </div>

    <div class="btn-group">

        <button class="btn add"><i class="fa fa-plus-circle"></i></button>

        <button class="btn remove"><i class="fa fa-minus-circle"></i></button>

    </div>

    <button class="btn forward">move <i class="fa fa-angle-right"></i></button>

    <button class="btn next">item <i class="fa fa-angle-right"></i></button>

    <button class="btn nextPage">page <i class="fa fa-angle-double-right"></i></button>

</div>

<script src="https://darsa.in/sly/examples/js/vendor/plugins.js"></script>

<script src="https://darsa.in/sly/js/sly.min.js"></script>

<script src="https://darsa.in/sly/examples/js/horizontal.js"></script>