javascript - 用于幻灯片放映的中央寻呼机拇指

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 中，您将拥有内嵌文本对齐显示的寻呼机:居中。

你的 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 中使用负 margin-left 来使寻呼机居中:

你的 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;
}

你在 slider-start/init 上的 js/jquery:

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