我正在使用vanilla JS创建滑块npm包，例如slick.js。当我想在容器内水平滚动时，我遇到了这个特殊问题。我能够在第一次单击时向右滚动，但是当我单击按钮滚动多次时，它将自动滚动到容器内的最后一个div。我只想使用香草js构建此滑块。
我的容器中有4个div，这些div是背景图像，占据了整个宽度。当我单击向左或向右按钮时，我想滚动到容器内的下一个div。
const button = document.getElementById('click');
const right = document.getElementById('right');
button.addEventListener('click',() => {
container.scrollLeft += '1133';
});<body>
<div class="slick1 presentation-container mx-auto mt-5 " id="presentation" style="position: relative;">
<div data-slide="1"
style="background-image: url('https://hatrabbits.com/wp-content/uploads/2016/12/rare-combinaties.jpg'); height: 600px">
</div>
<div data-slide="2"
style="background-image: url('https://miro.medium.com/max/5000/1*jFyawcsqoYctkTuZg6wQ1A.jpeg'); height: 600px">
</div>
<div data-slide="3"
style="background-image: url('https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg'); height: 600px">
</div>
<div data-slide="4"
style="background-image: url('https://hatrabbits.com/wp-content/uploads/2016/12/rare-combinaties.jpg'); height: 600px">
</div>
</div>
<button id='click'>left</button>
<script src="build/bundle.js"></script>
<script>
presentation.start('presentation')
</script>
</body>
https://wiki.termux.com/wiki/Termux:Tasker
这是整个捆绑包
var presentation = (function (exports) {
'use strict';
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
const forward = htmlToElement(`<div class="presentation-forward-arrow-container">
<svg class="presentation-navigation presentation-forward" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
clip-rule="evenodd"></path>
</svg>
</div>`);
const backward = htmlToElement(`<div class="presentation-back-arrow-container">
<svg class="presentation-navigation presentation-back" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z"
clip-rule="evenodd"></path>
</svg>
</div>`);
let container = undefined;
const slides = [];
const button = document.getElementById('click');
button.addEventListener('click',() => {
console.log('click');
container.scrollLeft += '1150';
// slides[0].classList.add('slidein');
});
function build(id) {
container = document.getElementById(id);
addSlidesToArray();
addNavigation();
}
const addSlidesToArray = () => {
container.childNodes.forEach((el) => {
if (el.dataset !== undefined) {
if (el.dataset.slide) {
slides.push(el);
el.classList.add('container-child');
}
}
});
};
const addNavigation = () => {
slides.forEach((x) => {
x.appendChild(forward.cloneNode(true));
x.appendChild(backward.cloneNode(true));
});
};
function validateID(id) {
const container = document.getElementById(id);
if (container && container !== undefined) {
return true;
} else {
console.error('Presentation requires a valid ID');
return false;
}
}
function start(id) {
if (!validateID(id)) {
return false;
}
build(id);
}
exports.start = start;
Object.defineProperty(exports,'__esModule',{ value: true });
return exports;
})({});