带有自定义项目符号的自动图像滑块

Question

   <body>
<div id="slide">
      <div class="slideshow-container">
        <div class="mySlides fade"> <img src="images/Image01.png"> </div>
        <div class="mySlides fade"> <img src="images/Image02.png"> </div>
        <div class="mySlides fade"> <img src="images/Image03.png"> </div>
        <div class="mySlides fade"> <img src="images/Image04.png"> </div>
        <div class="mySlides fade"> <img src="images/Image05.png"> </div>
        <div class="mySlides fade"> <img src="images/Image06.png"> </div>
      </div>
     </div>
    <div class="dots"> 
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span>
          <span class="dot" onclick="currentSlide(4)"></span>
          <span class="dot" onclick="currentSlide(5)"></span>
          <span class="dot" onclick="currentSlide(6)"></span>
   </div
</body>

i am trying to customize the bullets in the slider as show in the image .can any one help me. 我试图自定义滑块中的项目符号，如图中所示。任何人都可以帮助我。

Answer 1

You can use the CSS pseudo-element :before or :after on your .dot . 您可以在.dot上使用CSS伪元素:before或:after 。

There are many ways to do it, this is just one approach. 有很多方法可以做到，这只是一种方法。

 .dot { display: inline-block; border: 1px solid brown; border-radius: 50%; } .dot:before { content: ''; display: block; background: brown; width:10px; height: 10px; border-radius: 50%; margin: 1px; } .dot.active:before { background: red; }

 <div class="dots"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot active" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> <span class="dot" onclick="currentSlide(6)"></span> </div>

带有自定义项目符号的自动图像滑块

问题描述

1 个解决方案

解决方案1
0 2018-07-18 06:00:30

带有自定义项目符号的自动图像滑块

问题描述

1 个解决方案

解决方案1 0 2018-07-18 06:00:30

解决方案1
0 2018-07-18 06:00:30