javascript - JavaScript 在容器内水平滚动无法正常工作
问题描述
我正在使用 Vanilla JS 创建一个滑块 npm 包,例如 slick.js。当我想在容器内水平滚动时遇到了这个特殊问题。我可以在第一次单击时向右滚动,但是当我多次单击按钮滚动时,它会自动滚动到容器内的最后一个 div。我只想使用 vanilla js 来构建这个滑块。
我的容器中有 4 个 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>
这是整个捆绑包
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;
})({});
解决方案
推荐阅读
- node.js - 在 node.js 中,IP 地址不断变化。但我认为本地计算机 IP 地址是不变的
- json - 使用命令的输出在 bash 中创建 JSON 对象以脱颖而出
- apache2 - Certbot 无法在子域中正常工作
- reactjs - 最佳实践:使用 setState 或 dispatch 的 useEffect 依赖,通过 useContext 或自定义钩子
- html - 为什么将haml代码转换为html不起作用
- python - 通过systemd运行时openssl证书验证失败
- javascript - 访问对象中第一个键的第一个值
- javascript - 为什么打字稿会在数字上抛出错误| 未定义的比较,即使在使用可选链接之后?
- configuration - 为什么在 nix-shell 使用预构建的二进制文件时 configuration.nix 编译?
- python - 我正在处理一个大型数据集。数据中的每个值都需要清理。我如何在熊猫中使用过滤器或查询功能来做到这一点