幻灯片的中心寻呼机拇指

Question

例如如果我有 4 张幻灯片图像，我可以手动居中，以便在幻灯片的底部中间生成 4 个寻呼机拇指，因此您只需使用绝对位置调整寻呼机。

但是如果一个非编码用户决定添加额外的幻灯片，那么它会生成 5 张幻灯片和一个额外的拇指，并且每次寻呼机现在例如每个额外的拇指向左或向右移动。

无论添加或删除多少个拇指，我如何使其保持居中？

就像我说的，我只是尝试绝对化寻呼机容器：

.region-slideshow .widget_pager_bottom {
  bottom: 50px;
  color: #FFFFFF;
  position: absolute;
  right: 490px;
  z-index: 10;
}
.region-slideshow .widget_pager_bottom .views_slideshow_pager_field_item {
  display: inline-block;
}
.region-slideshow .widget_pager_bottom .views_slideshow_pager_field_item .views-content-counter {
  background: url("../images/slideshow-pager.png") no-repeat scroll center center rgba(0, 0, 0, 0);
  cursor: pointer;
  display: block;
  height: 23px;
  text-indent: -9999px;
  width: 22px;
}

Answer 1

您可以使用绝对定位并占据整个宽度的 div 来包装寻呼机。在这个 div 中，您将拥有与 text-align: center 内联显示的寻呼机。

你的html：

<section class="slider">
    <ul class="slides">
    ...
    </ul>
    <div class="slider-nav">
        <div class="pager">pagination here</div>
    </div>
</Section>

你的 CSS：

.slider {
    position: relative;
}

.slider-nav {
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.pager {
    display: inline;
}

如果您无法操作标记，您可以通过在滑块初始化的 js/jquery 中使用负边距来使寻呼机居中：

你的html：

<section class="slider">
    <ul class="slides">
    ...
    </ul>
    <div class="pager">pagination here</div>
</Section>

你的 CSS：

.slider {
    position: relative;
}

.pager {
    bottom: 0;
    left: 50%;
    position: absolute;
}

您在滑块启动/初始化上的 js/jquery：

var pager = $('.pager');
var pagerWidth = pager.width();
pager.css('margin-left', (pagerWidth / 2) * -1);