滑动显示导航"dots"

Question

您的论坛新手 - 请原谅任何错误。使用滑动放映/幻灯片放映。节目有效，但节目下方的"点"应该跟随用户滑动。我尝试在列表项中添加"a"标签，也尝试了带有类"on"的跨度。

.HTML

<div class="dots">
    <ul id='position'>
        <li class='on'></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

.CSS

.dots {
    margin: 7px auto 0px;
    position: relative;
    max-width: 680px;
}
.dots a {
    color: rgb(205, 205, 205) !important;
    font-style: normal;
}
.dots #position {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.dots #position li {
    background: rgb(255, 255, 255);
    margin: 0px 2px;
    border-radius: 10px;
    width: 10px;
    height: 10px;
    display: none;
    cursor: pointer;
    box-shadow: inset 0px 1px 3px grey, 0px 0px 1px 1px #8b8989;
}
.dots #position li.on {
    box-shadow: inset 0px 1px 3px -1px #7EC153, 0px 1px 2px rgba(0, 0, 0, 0.5);
    background-color: rgb(126, 193, 83);
}

---

现场演示：http://192.185.168.157/~rylex658/mobile/residential-cabinets.html

Answer 1

Swipeshow 的作者。

.dots #position应该.dots#position - 尝试一下。此外，没有必要用<li>填充它 - 它们将由图书馆为您完成。