问题:

How do I style my carousel dots to become like this ?

Here is what I have now.

Here is how I style it.

HTML

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

回答1:

Here you go. :)

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>

回答2:

I threw this together which does it purely with HTML and 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; }

回答3:

I have also tried to create some dots :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; }

回答4:

Here is how I would do it :

I will design every little pieces using Photoshop. that way I can make it exactly like what you described.

I will create 2 small circle, with 20 px by 20 px

1.gradient light-blue and dark-blue
2.gradient black and gray

Save them as .PNG files and load them back into .CSS file Then I'll apply the background-image: url("blue_dot.png"); to the blue one, and background-image: url("black_dot.png"); to the black one.

If needed, adjust your width and height to fit your needs.

转载请标明出处:How to style carousel dots?

文章来源: How to style carousel dots?

标签

dot