幻灯片显示的中心寻呼机拇指

Question

E.g。如果我让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位于绝对位置并占据整个宽度。在这个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;
}

如果你无法操纵标记，你可以在slider-init上使用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在slider-start / init：

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