幻燈片的中心尋呼機拇指

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上，該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中使用負的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;
}

您的js / jquery在slider-start / init上：

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