向轮播添加指示器

Question

我设置了一个轮播。我需要在底部添加指示器以向用户显示他们在哪张幻灯片上。我读过使用 bootstrap scrollspy 可以工作，但尝试过并没有成功。

我该如何使用 scrollspy 呢？或者有没有更好的方法，以及如何？

Codepen

<ul class="slider">
    <li class="hideable" style="display: block;" id="section1">
        <img class="slide-img" src="http://placehold.it/100x100"/>
    </li>
    <li class="hideable"  id="section2">
        <img class="slide-img" src="http://placehold.it/200x100"/>
    </li>
    <li class="hideable"  id="section3">
        <img class="slide-img" src="http://placehold.it/300x100"/>
    </li>
    <li class="hideable"  id="section4">
        <img class="slide-img" src="http://placehold.it/400x100"/>
    </li>
    <li class="hideable">
        <img class="slide-img" src="http://placehold.it/500x100"/>
    </li>
    <li class="hideable">
        <img class="slide-img" src="http://placehold.it/600x100"/>
    </li>
</ul>
<ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
</ul>

Answer 1

尝试使用carousel 而不是滑块。