Markup of sliding living example

markup_sliding_live_example.html

<form class="well custom-init">
                <label for="option">Items</label>
                <input type="text" placeholder="items to display" class="input-medium option-item" name="option-item">
                
                <label for="option">Current page</label>
                <input type="text" placeholder="default is 1" class="input-medium option-currentPage" name="option-currentPage">
                
                
                <label for="option-autoHeight">autoHeight</label>
                <select class="option-autoHeight" name="option-autoHeight">
                  <option value="1">true</option>
                  <option value="0">false</option>
                </select>
                <input type="submit" class="btn" value="Apply sliding" />
                <h4>How to display current pages</h4>
                <code>$('.current-page').html(element.sliding('getCurrentPage'));</code>
                <p><small>Current page: </small><span class="current-page badge">?</span></p>
                <h4>How to display total pages</h4>
                <code>$('.current-page').html(element.sliding('getTotalPages'));</code>
                <p><small>Total Pages: </small><span class="total-pages badge">?</span></p>
            </form> 
            <div class="slide-live-example">
              <ul class="unstyled">
                <li><img src="http://placehold.it/140x30"></li>
                <li><img src="http://placehold.it/140x50"></li>
                <li><img src="http://placehold.it/140x90"></li>
                <li><img src="http://placehold.it/140x80"></li>
                <li><img src="http://placehold.it/140x50"></li>
                <li><img src="http://placehold.it/140x80"></li>
                <li><img src="http://placehold.it/180x90"></li>
                <li><img src="http://placehold.it/140x70"></li>
                <li><img src="http://placehold.it/140x40"></li>
                <li><img src="http://placehold.it/140x30"></li>
                <li><img src="http://placehold.it/140x80"></li>
                <li><img src="http://placehold.it/140x40"></li>
                <li><img src="http://placehold.it/140x90"></li>
                <li><img src="http://placehold.it/140x80"></li>
                <li><img src="http://placehold.it/140x90"></li>
                <li><img src="http://placehold.it/140x100"></li>
              </ul>
            </div>
            <div class="live-pagination">
            <a href="#" class="btn live-previous">Previous</a>
            <a href="#" class="btn live-next">Next</a>
            </div>