自定义bootstrap轮播指示器

Question

基本上，我有一个带有三个图像的旋转木马，我需要使用dots自定义轮播指示符，恢复为：如果我有一个活动的轮播而另一个应该像{{0}所以我试过这个：

.carousel-indicators li{
   background: url(../images/dot.png) no-repeat;
   max-width:25%;
   max-height:15%; 
   cursor: pointer;
   text-align:center;
}

这是DEMO！我能做到的任何方式吗？非常感谢！

Answer 1

Demo Fiddle

您需要更改轮播，以便在幻灯片更改时将active类正确添加到右侧li，然后尝试将以下内容添加到您的CSS中：

.pagination li a, .pagination li:last-child a, .pagination li:first-child a  {
    border-radius:100%;
    background:teal;  
    color:transparent;
    display:inline-block;
    margin:0 2px;
}

.pagination li.active a, .pagination li.active:last-child a, .pagination li.active:first-child a  {
    border-radius:100%;
    background:black;    
    height:10px;
    line-height:10px;
    width:10px;
    padding:5px;
    margin-top:5px;
}