如何风格旋转木马点？ [英] How to style carousel dots?

问题描述

如何调整轮转点的样式以使其成为这样？

这是我现在所做的。

这里是我的风格。 / p>

  .slick-dots {position：absolute; bottom：-45px; list-style：none;显示：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按钮{border：0;背景：透明;显示：block; height：20px; width：20px; outline：none; line-height：0; font-size：0;颜色：透明; padding：5px; cursor：pointer; } 
 .slick-dots li按钮：hover，.slick-dots li按钮：focus {outline：none; } 
 .slick-dots li按钮：hover：before，.slick-dots li按钮：focus：before {opacity：1; } 
 .slick-dots li按钮：before {position：absolute; top：0;左：0;内容：•; width：20px; height：20px; font-family：slick; font-size：6px; line-height：5px; text-align：center;颜色：黑色;不透明度：0.25; -webkit-font-smoothing：antialiased; -moz-osx-font-smoothing：grayscale; } 
 .slick-dots li.slick-active按钮：before {color：black;不透明度：0.75; } 
  

HTML

 < div class =row slick> 
 //一堆图片
< / div> 
  

解决方案

：）

< prename =snippet-code-css lang-css prettyprint-override> nav.carousel：hover {cursor：default;} / *隐藏单选按钮* / nav.carousel input [type = radio ] {display：none;} / *所有样式都发生在标签元素上* / nav.carousel label {display：inline-block;背景：#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-1type =radioname =carousel-dots> < label for =carousel-item-1>转到项1< / label> < input id =carousel-item-2type =radioname =carousel-dotschecked> < label for =carousel-item-2>转到项目2< / label> < input id =carousel-item-3type =radioname =carousel-dots> < label for =carousel-item-3>转到条目3< / label> < input id =carousel-item-4type =radioname =carousel-dots> < label for =carousel-item-4>转到项目4< / label> < input id =carousel-item-5type =radioname =carousel-dots> < label for =carousel-item-5>转到第5项< / label> < input id =carousel-item-6type =radioname =carousel-dots> < label for =carousel-item-6>前往第6项< / label>< / nav>  

/ p>

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

Here is what I have now.

Here is how I style it.

.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>

解决方案

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>

这篇关于如何风格旋转木马点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！