Come disegnare i punti del carosello?

Question

Come si modellano i punti della giostra in modo che diventino così?

Ecco quello che ho adesso.

ecco come lo stile di esso.

.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; } 
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } 
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; } 
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; } 
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } 
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 5px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; } 

HTML

<div class="row slick"> 
// a bunch of images 
</div> 

Answer 1

Ecco come lo farei:

io vi progettare ogni piccoli pezzi utilizzando Photoshop. in questo modo posso farlo esattamente come quello che hai descritto.

creerò 2 piccolo cerchio, con 20 px da 20 px

• 1.gradient azzurro e blu scuro
• 2.gradient nero e grigio

salvarli come file .PNG e caricarli nuovamente nel file .CSS Quindi applicherò lo background-image: url("blue_dot.png"); a quello blu e lo background-image: url("black_dot.png"); a quello nero.

Se necessario, regolare il numero width e height in base alle proprie esigenze.

Answer 2

ho buttato questo insieme, che lo fa esclusivamente con HTML e CSS: http://jsfiddle.net/kajrttgv/2

<div class="container"> 
    <span class="dot"></span> 
    <span class="dot active"></span> 
    <span class="dot"></span> 
</div> 

.dot { 
    background-color: #eee; 
    border: 1px solid #666; 
    border-radius: 5px; 
    box-shadow: inset 1px 1px 1px #888; 
    display: inline-block; 
    height: 10px; 
    width: 10px; 
} 
.dot.active { 
    background-color: #41ABE5; 
    box-shadow: inset 2px 0px 2px -2px #333; 
} 

Answer 3

Ho anche cercato di creare alcuni punti: p. JSFiddle: http://jsfiddle.net/Thaillie/o8q56tga/

<div class="container"> 
    <span class="slickdot"></span> 
    <span class="slickdot active"></span> 
    <span class="slickdot"></span> 
</div> 

.container { 
    padding: 20px; 
} 

.slickdot { 
    height: 15px; 
    width: 15px; 
    background: lightgray; 
    border-radius: 50px; 
    display: inline-block; 
    box-shadow:0px 0px 4px gray inset; 
} 

.slickdot.active { 
    background-color: #41ABE5; 
    box-shadow: inset 0px 0px 4px #888888; 
} 

Answer 4

Ecco qui. :)

nav.carousel:hover { 
 
    cursor: default; 
 
} 
 

 
/* Hide the radio button */ 
 
nav.carousel input[type=radio] { 
 
    display: none; 
 
} 
 

 
/* All styling takes place on the label element */ 
 
nav.carousel label { 
 
    display: inline-block; 
 
    background: #ddd; 
 
    overflow: hidden; 
 
    text-indent: -999px; 
 
    border-radius: 100%; 
 
    width: 10px; 
 
    height: 10px; 
 
    box-shadow: inset 0 1px 1px 0 #999; 
 
} 
 
nav.carousel label:hover { 
 
    background: #bbb; 
 
    cursor: pointer; 
 
    box-shadow: inset 0 1px 1px 0 #777; 
 
} 
 
nav.carousel input:checked + label { 
 
    background: linear-gradient(#00CFFF, #1584bc); 
 
    box-shadow: inset 0 0 1px 1px #087DC0; 
 
}

<nav class="carousel"> 
 
    <input id="carousel-item-1" type="radio" name="carousel-dots"> 
 
    <label for="carousel-item-1">Go to item 1</label> 
 

 
    <input id="carousel-item-2" type="radio" name="carousel-dots" checked> 
 
    <label for="carousel-item-2">Go to item 2</label> 
 

 
    <input id="carousel-item-3" type="radio" name="carousel-dots"> 
 
    <label for="carousel-item-3">Go to item 3</label> 
 

 
    <input id="carousel-item-4" type="radio" name="carousel-dots"> 
 
    <label for="carousel-item-4">Go to item 4</label> 
 

 
    <input id="carousel-item-5" type="radio" name="carousel-dots"> 
 
    <label for="carousel-item-5">Go to item 5</label> 
 

 
    <input id="carousel-item-6" type="radio" name="carousel-dots"> 
 
    <label for="carousel-item-6">Go to item 6</label> 
 
</nav>