如何解决当数字图像项目可变时,如何将我的指示器项目居中放置在滑块中?
我有一个将焦点图像居中的滑块,但我无法将指示器项目(点)居中,因为每个滑块都有不同数量的图像。这是我的滑块和指示器的 HTML:
<div class="main">
<section id="slider" >
<div class="container-fluid">
<div class = 'responsiveHeight'>
<div class = 'inner'>
<div class = 'iosSlider'>
<div class = 'slider'>
<img class="item selected" src="/park-terrace/00-park-terrace.jpg" alt="Park Terrace"/>
<img class="item " src="/park-terrace/01-park-terrace.jpg" alt="Park Terrace"/>
<img class="item " src="/park-terrace/02-park-terrace.jpg" alt="Park Terrace"/>
</div>
</div>
</div>
<div class="prevButton"></div>
<div class="nextButton"></div>
</div>
</div> <!-- /.container -->
<div class = 'indicators'>
<div class = 'item selected'></div>
<div class = 'item'></div>
<div class = 'item'></div>
</div>
</section>
这是我的 CSS:
.main {height:432px;}
#slider {
position:absolute;
top:100px;
left:0px;
width:100%;
color:#666;
z-index:1;
}
.responsiveHeight {
height: 0;
padding: 0 0 80% 0;
position: relative;
overflow:hidden;
}
.responsiveHeight > .inner {
position: absolute;
width: 100%;
height: 100%;
}
.iosSlider {
width: 100%;
height: 100%;
}
.iosSlider .slider {
width: 100%;
height: 100%;
}
.iosSlider .slider img {
height: 100%;
padding-right:2px;
}
.indicators {
position: relative;
top: 10px;
left: 150px;
width: 400px;
height: 10px;
margin: 0 auto;
z-index: 10;
}
.indicators .item {
float: left;
width: 12px;
height: 12px;
margin: 0 5px 0 0;
border-radius: 10px;
background-color:#666;
}
问题示例如下:
small number of images large number of images
我希望有一种方法可以调整我的 css 而不是使用 javascript。我愿意接受任何建议,感谢您的帮助。
解决方法
如果我对您的理解正确,我们可以将其隔离为“指标”。您可以使用 flexbox 在中心弹出这些:
.indicators {
width: 100%;
display: flex;
justify-content: center;
padding: 40px 0;
}
.indicators .item {
width: 12px;
height: 12px;
margin: 0 5px 0 0;
border-radius: 10px;
background-color:#666;
}
<div class='indicators'>
<div class='item selected'></div>
<div class='item'></div>
<div class='item'></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。