javascript - 为 CSS 驱动的幻灯片添加分页(索引)指示器

Question

我有一个简单的 slider ，我使用新的 CSS Scroll Snap module 组合在一起。 .

现在我被困在如何向用户显示他们所在的页面上。在 Javascript 中，通常会这样做 like this或通过 Bootstrap like this ...但我正在摸索如何检测和显示当前可见幻灯片的索引，因为到目前为止它只是一个 CSS 实现。有任何想法吗？或者我必须恢复到 js slider 吗？

payload =  [{
	"url": "https://unsplash.it/801?random",
	"filter": "nashville"
}, {"url": "https://unsplash.it/802?random",
	"filter": "aden"
}, {
	"url": "https://unsplash.it/803?random",
	"filter": "mayfair"
}, {
	"url": "https://unsplash.it/804?random",
	"filter": "lofi"
}, {
	"url": "https://unsplash.it/805?random",
	"filter": "kelvin"
}, {
	"url": "https://unsplash.it/806?random",
	"filter": "mayfair"
}]

const init = function(){
	var slider = document.getElementById("slider");
	for (let i = 0; i < payload.length; i++){
		slider.innerHTML += "<section><figure class='" + payload[i].filter + "'><img src='" + payload[i].url + "' /> </figure></section>";	
	}
	
	//cssScrollSnapPolyfill()
}
init();

img {
  display: inline-block;
  height: 98vh;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100vw;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-y: hidden;
}

.slider {
  font-family: sans-serif;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  display: flex;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
}

section {
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-align: center;
  position: relative;
}

.pagination {
  display: inline-block;
  position: fixed;
  background: rgba(33, 33, 33, 0.9);
  color: #fff;
  text-align: center;
  border-radius: 13px;
  z-index: 4;
  width: 70px;
  top: 20px;
  right: 20px;
}

span {
  display: inline-block;
  line-height: 28px;
  vertical-align: middle;
}

<div class="slider" id="slider">
	<div class='pagination'> <span>1 / 5</span></div>
</div>

Answer 1

如何使用 css scroll snap 容器的当前滚动并将其除以幻灯片的宽度？