如何设计旋转木马的小圆点样式？

Question

我该如何将我的轮播点样式更改为这个样子？这是我现在的样子。以下是我如何设置它的样式。

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

- iori

---

那些看起来像精灵，所以你需要将它们样式化，以便使用图像作为背景。 - Andrew

这里还有一个想法。http://jsfiddle.net/h2tLrcsw/1/ - Nico O

@NicoO：哇，我喜欢你的回答。它非常接近我发布的图片。我不确定如何将我的CSS与你的整合。回答一下，我会确保接受你的回答。 :) - iori

@PatrickLC：我使用slick.js。 - iori

我觉得你应该得到+25的赞，因为你的回答最接近我的问题。别误会，我也喜欢@im1dermike的回答。所以，我给他点赞+10。;) - iori

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

- Zaqx

---

我们需要为每个点都设置样式吗？如果有20个点怎么办？ - dcsan

@dcsan，我不确定你所说的“style each one”的意思。CSS会描述样式应该如何应用到满足CSS选择器指定的条件的元素上。在这个例子中，CSS中没有一个选择器专门针对单个圆点进行样式设置。因此，圆点的数量是无关紧要的；这个例子中可能有20个或100000个圆点，但这不会影响样式设置。这回答了你的问题吗？ - Zaqx

Answer 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;
  }
}

- Dmitry Grinko

Answer 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;
}

- mellis481

Answer 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;
}

- Thaillie

---

谢谢你的解决方案。你有在JSFiddle上吗？ - iori

Answer 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);
}

- bhaRATh

Answer 6

我会这样做：

我将使用Photoshop设计每个小组件，这样我可以制作出与您描述的完全相同的效果。

我将创建两个小圆，大小为20像素乘20像素

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

将它们保存为 .PNG 文件并加载回 .CSS 文件， 然后我将应用background-image: url("blue_dot.png");到蓝色的圆，以及background-image: url("black_dot.png");到黑色的圆。

如果需要，调整您的width和height以适应您的需要。

- user4287698