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

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

slick-theme.css