.slidepages li {
    list-style-type: none;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border:solid 1px #aaa
}

    .slidepages li:hover {
        box-shadow: 0 0 5px 2px white
    }

    .slidepages li.active {
        background-color: orange;
        border: solid 1px orange
    }

.slidepages {
    position: absolute;
    z-index: 999
}

    .slidepages.horizontal {
        left: 50%;
        transform: translateX(-50%);
        bottom: 25px
    }

        .slidepages.horizontal li {
            display: inline-block;
            margin-right: 10px
        }

            .pages.horizontal li:last-child {
                margin-right: 0
            }

.slidepages.vertical {
    right: 5px;
    top: 50%;
    transform: translateY(-50%)
}

    .slidepages.vertical li {
        margin-bottom: 10px
    }

        .slidepages.vertical li:last-child {
            margin-bottom: 0
        }