如何在光滑的幻灯片上制作实际的点？

Question

我如何在幻灯片上制作实际的点，因为我目前只获得带有数字的按钮。我不知道该怎么做，也不知道该放在哪里。谁能帮忙？我网站上的代码正是我被告知在网站上执行的代码，但它不起作用。这是一个全新的站点，尚未在任何地方发布。

#slideshow .slick-slide { min-height: 1180px;
}

#slideshow .slick-dots {
    transform: translateY(-50);
     position: relative;
  z-index: 10;
  bottom: 50px;
display: flex;
 justify-content: center;
 
 margin: 0;
 padding: 1rem 0;
 
 list-style-type: none;
 
  li {
   margin: 0 0.25rem;
  }
 
  button {
   display: block;
   width: 1rem;
   height: 1rem;
   padding: 0;
   
   border: none;
   border-radius: 100%;
   background-color: blue;
   
   text-indent: -9999px;
  }
 
  li.slick-active button {
   background-color: red;
  }
}

<div id="slideshow">
     <div style="background:url(CSS/Images/SunnyBistro-7%20edited.jpg) center no-repeat; background-size:cover;">
         <div class="slider-content">
            <h2> Slider Title 1</h2>
            <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
            </div>
        </div>
     <div style="background:url(CSS/Images/Gaming-3.jpeg) center no-repeat; background-size:cover;">
         <div class="slider-content">
            <h2> Slider Title 2</h2>
            <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
            </div>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script>
    $(document).ready(function () {
        $('.header ').stickyNavbar();
 $('#slideshow').slick({
dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear',
arrows: false,
autoplay:true,
autoplayspeed: 2000,
         

});

    })
</script>

Answer 1

您需要添加：

slick.css

圆滑-theme.css

如何在光滑的幻灯片上制作实际的点？

How to make actual dots on a slick slideshow?

javascript

jquery

slick.js