如何设计轮播点的样式？答案

【问题标题】：How to style carousel dots?如何设计轮播点的样式？
【发布时间】：2015-02-11 12:49:45
【问题描述】：

如何将我的轮播点设计成这样？

这是我现在拥有的。

这是我的风格。

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

【问题讨论】：

您能提供一段您正在设计的 html 吗？
那些看起来像精灵，所以你必须设置它们的样式以使用图像作为背景。
@Andrew：你想回答吗？前进！我会选择最好的并接受它。
@Thaillie：我的 HTML 非常简单。
这里也是个思路。 jsfiddle.net/h2tLrcsw/1

标签： css reactjs twitter-bootstrap carousel react-slick

【解决方案1】：

给你。 :)

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>

【讨论】：

我们需要为每一个设置样式吗？如果有 20 个点怎么办？
@dcsan 不确定您所说的每个样式的含义。如果元素符合 CSS 选择器中列出的标准，CSS 描述了要应用的样式。在这个例子的 CSS 中，我没有一个选择器来设置单个点的样式。因此，点的数量是无关紧要的；可能有 20 个点或 100000 个点，这对本示例中的样式没有影响。这能回答你的问题吗？

【解决方案2】：

这是我的例子

.slick-dots {
  bottom: 50px;
  li button:before,
  li.slick-active button:before {
    color: transparent;
    opacity: 1;
  }
  li button:before{
    background-color: transparent;
    border: 4px solid #fff;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    width: 20px;

  }
  li.slick-active button:before {
    background-color: #fff;
  }
}

【讨论】：

【解决方案3】：

我把它放在一起，它完全使用 HTML 和 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;
}

【讨论】：

【解决方案4】：

我也尝试创建一些点：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;
}

【讨论】：

感谢您的解决方案。你在 JSFiddle 中有它们吗？

【解决方案5】：

在 react slick carousel 中获得方形自定义点。

.slick-dots li {
    margin: 0;
}

.slick-dots {
    margin-top: 50px;
}

.slick-dots li button:before, .slick-dots li.slick-active button:before {
    color: transparent;
    opacity: 1;
}

.slick-dots li button:before {
    margin-top: 5px;
    background-color: transparent;
    border: 1px solid rgb(90, 90, 90);
    border-radius: 20%;
    display: inline-block;
    height: 5px;
    width: 10px;
}
.slick-dots li.slick-active button:before {
    background-color: rgb(26, 24, 24);
}

【讨论】：

【解决方案6】：

我会这样做：

我将使用 Photoshop 设计每一件小作品。这样我就可以完全像你描述的那样。

我将创建 2 个小圆圈，大小为 20 像素 x 20 像素

1.渐变浅蓝色和深蓝色
2.渐变黑灰

将它们保存为 .PNG 文件并将它们重新加载到 .CSS 文件中然后我会申请background-image: url("blue_dot.png"); 给蓝色的，background-image: url("black_dot.png"); 给黑色的。

如果需要，请调整您的 width 和 height 以满足您的需求。

【讨论】：