如何使用css滚动快照容器的当前滚动并将其除以幻灯片的宽度？
,
此答案仅是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,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>
但是在这种解决方案中，我们假设所有图像的宽度都相同。
,
简化@Francesco和@Andrew的零件并添加一个去抖功能，我们得到了：
payload = [{
"url": "https://s3.amazonaws.com/appforest_uf/f1573502006658x593350952181959600/IMG_7552.JPG",{"url": "https://source.unsplash.com/featured/?dinner",{
"url": "https://source.unsplash.com/featured/?dinner/1",{
"url": "https://source.unsplash.com/featured/?dinner/2",{
"url": "https://source.unsplash.com/featured/?dinner/3",{
"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,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>
本文链接：https://www.f2er.com/3114141.html
