为 CSS 驱动的幻灯片添加分页（索引）指示器答案

【问题标题】：Adding pagination (index) indicator for a CSS powered slideshow为 CSS 驱动的幻灯片添加分页（索引）指示器
【发布时间】：2019-11-12 21:35:23
【问题描述】：

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

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

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>

【问题讨论】：

标签： javascript css slider carousel

【解决方案1】：

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

【讨论】：

这主意不错！我将开始研究如何做到这一点。你有机会提供一些代码吗？还是我应该研究的 css 属性名称？
我可以使用var el = document.querySelector('.slider'); console.log(el.scrollLeft, el.scrollTop); 来获取滚动位置，但我需要一种方法来在每次滚动捕捉时触发它......
所以，你需要使用el.addEventListener('scroll', function() { // here check the scroll position })。每次滚动都会触发回调函数。

【解决方案2】：

这个答案只是 Francesco Manicardi 之前建议的实现。你可以这样做：

const 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 slider = document.getElementById("slider");
const pagination = document.querySelector('.pagination')

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

	initPagination();
}

init();


function initPagination() {
	pagination.innerHTML = `<span>1 / ${payload.length}<span>`;

	slider.addEventListener('scroll', function () {
		pagination.innerHTML = `<span>${getCurrentPageNumber()} / ${payload.length}<span>`;
	});
}

function getCurrentPageNumber() {
	const imgWidth = getSliderWidth() / payload.length;
	const imgShift = imgWidth * 0.5; // when to consider that the page has changed

	return Math.floor((slider.scrollLeft + imgShift) / imgWidth) + 1;
}

function getSliderWidth() {
	let width = 0;

	Array.from(slider.children).forEach(child => {
		const img = child.querySelector('img');

		if (img) {
			width += img.width;
		}
	});

	return width;
}

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>
<div class='pagination'><span>1 / 5</span></div>

但在这个解决方案中，我们假设所有图像的宽度都相同。

【讨论】：

【解决方案3】：

简化来自@Francesco 和@Andrew 的部分并添加去抖动功能，我们得到：

payload =  [{
	"url": "https://s3.amazonaws.com/appforest_uf/f1573502006658x593350952181959600/IMG_7552.JPG",
	"filter": "nashville"
}, {"url": "https://source.unsplash.com/featured/?dinner",
	"filter": "aden"
}, {
	"url": "https://source.unsplash.com/featured/?dinner/1",
	"filter": "mayfair"
}, {
	"url": "https://source.unsplash.com/featured/?dinner/2",
	"filter": "lofi"
}, {
	"url": "https://source.unsplash.com/featured/?dinner/3",
	"filter": "kelvin"
}, {
	"url": "https://source.unsplash.com/featured/?lunch/4",
	"filter": "mayfair"
}]

	
const init = function(){
	const slider = document.querySelector('.slider');
	const pagination = document.querySelector('.pagination')
	pagination.innerHTML = `<span>1 / ${payload.length}<span>`;
	for (let i = 0; i < payload.length; i++){
		slider.innerHTML += "<section><figure class='" + payload[i].filter + "'><img src='" + payload[i].url + "' /> </figure></section>";
	}
}
init();

slider.addEventListener('scroll', _.debounce(function() { 
	//console.log(Math.round(slider.scrollLeft / slider.offsetWidth )+1);
	const pagination = document.querySelector('.pagination')	
	pagination.innerHTML = `<span>${Math.round(slider.scrollLeft / slider.offsetWidth )+1} / ${payload.length}<span>`;
}, 200)) //Lower this debounce number and note how the number of scroll events fired increases... We'd like to maintain just one scroll event.

img {
  display: inline-block;
  height: 70vh;
  -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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

<div class="slider" id="slider">
	<div class='pagination'>
	</div>
</div>

【讨论】：