jquery - Customize bootstrap carousel indicators -
basically, have carousel 3 images , need customize carousel indicators dots resume to: if have active carousel
, other should
, tried :
.carousel-indicators li{ background: url(../images/dot.png) no-repeat; max-width:25%; max-height:15%; cursor: pointer; text-align:center; } here's demo! way can achieve that? appreciated!
demo fiddle
you'll need alter carousel active class correctly added right li on slide change, try adding below css:
.pagination li a, .pagination li:last-child a, .pagination li:first-child { 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 { border-radius:100%; background:black; height:10px; line-height:10px; width:10px; padding:5px; margin-top:5px; }
Comments
Post a Comment