我的圆点显示在图片下方,并向左对齐.我需要它们显示在图像的中心朝向底部.我搞不清楚这件事,但我觉得我就快到了.在我的产品页面上,它们显示了我是如何需要它们的,但不是在这个页面上.
请参阅下面的CSS/HTML.有什么主意吗?
$('.street-team-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
prevArrow: '<div class="hc-arrow-left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
nextArrow: '<div class="hc-arrow-right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>',
});
<!-- Street Team Slick Dots -->.street-team-slider ul.slick-dots {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
text-align: center;
width: 100%;
padding: 0;
margin-top: 0px;
margin-bottom: 0;
}
.street-team-slider .slick-dots li {
display: inline-block;
margin: 0 12px;
font-size: 14px;
color: #222;
}
.street-team-slider .slick-dots li button {
font-size: 0px;
height: 10px;
width: 10px;
padding: 0;
line-height: 0;
border-radius: 100%;
border: 2px solid #F00;
background-color: transparent;
cursor: pointer;
opacity: 1;
}
.street-team-slider .slick-dots li.slick-active button {
background-color: #fff;
opacity: 1;
}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Hero Slider Start-->
<div class="street-team-slider">
<div><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Our_Story.jpg?v=1480890581"></div>
<div><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Our_Story.jpg?v=1480890581"></div>
<div><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Our_Story.jpg?v=1480890581"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>