英文:
How do you create two lines of images in html/css that slide with the scrolling button
问题
像这样 -->>(https://i.stack.imgur.com/Z3QTV.png)
尝试过但没有成功，我试过
答案1
得分: 1
你需要的不仅仅是html和css，还需要一点点js。非常简单的滚动效果，你可以在2分钟内完成：
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
const wrapper = document.querySelector(".wrapper");
const left = document.querySelector(".left");
const right = document.querySelector(".right");
left.addEventListener("click", () => {
wrapper.scrollBy({ left: -100, behavior: "smooth" });
});
right.addEventListener("click", () => {
wrapper.scrollBy({ left: 100, behavior: "smooth" });
});
<!-- 语言: lang-css -->
.wrapper {
margin: auto;
overflow-x: scroll;
max-width: 500px;
}
.image-group {
display: flex;
flex-wrap: wrap;
width: 1500px;
gap: 20px;
}
<!-- 语言: lang-html -->
<div id="app">
<div class="wrapper">
<div class="image-group">
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
</div>
</div>
<button class="left">left</button>
<button class="right">right</button>
<!-- 结束代码段 -->
或者你可以使用现成的解决方案以获得一些高级变体
https://freefrontend.com/javascript-carousels/
英文:
You need not only html and css but a little bit js. Very simple scroll you can make in 2 minutes:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const wrapper = document.querySelector(".wrapper");
const left = document.querySelector(".left");
const right = document.querySelector(".right");
left.addEventListener("click", () => {
wrapper.scrollBy({ left: -100, behavior: "smooth" });
});
right.addEventListener("click", () => {
wrapper.scrollBy({ left: 100, behavior: "smooth" });
});
<!-- language: lang-css -->
.wrapper {
margin: auto;
overflow-x: scroll;
max-width: 500px;
}
.image-group {
display: flex;
flex-wrap: wrap;
width: 1500px;
gap: 20px;
}
<!-- language: lang-html -->
<div id="app">
<div class="wrapper">
<div class="image-group">
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
<img src="https://cataas.com/cat?width=300&height=300" />
</div>
</div>
<button class="left">left</button>
<button class="right">right</button>
<!-- end snippet -->
Or for some advanced variants you can use ready-made solutions
https://freefrontend.com/javascript-carousels/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论