如何在HTML/CSS中创建两行图像，使其随滚动按钮滑动。

huangapple
go评论110阅读模式
英文:

How do you create two lines of images in html/css that slide with the scrolling button

问题

像这样 -->>(https://i.stack.imgur.com/Z3QTV.png)

尝试过但没有成功，我试过

英文:

Like this -->>(https://i.stack.imgur.com/Z3QTV.png)

tried didnt work i tried

答案1

得分: 1

  1. 你需要的不仅仅是html和css，还需要一点点js。非常简单的滚动效果，你可以在2分钟内完成：
  3. <!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
  5. <!-- 语言: lang-js -->
  7.     const wrapper = document.querySelector(".wrapper");
  8.     const left = document.querySelector(".left");
  9.     const right = document.querySelector(".right");
  11.     left.addEventListener("click", () => {
  12.       wrapper.scrollBy({ left: -100, behavior: "smooth" });
  13.     });
  15.     right.addEventListener("click", () => {
  16.       wrapper.scrollBy({ left: 100, behavior: "smooth" });
  17.     });
  19. <!-- 语言: lang-css -->
  21.     .wrapper {
  22.       margin: auto;
  23.       overflow-x: scroll;
  24.       max-width: 500px;
  25.     }
  27.     .image-group {
  28.       display: flex;
  29.       flex-wrap: wrap;
  30.       width: 1500px;
  31.       gap: 20px;
  32.     }
  35. <!-- 语言: lang-html -->
  37.     <div id="app">
  38.       <div class="wrapper">
  39.         <div class="image-group">
  40.           <img src="https://cataas.com/cat?width=300&height=300" />
  41.           <img src="https://cataas.com/cat?width=300&height=300" />
  42.           <img src="https://cataas.com/cat?width=300&height=300" />
  43.           <img src="https://cataas.com/cat?width=300&height=300" />
  44.           <img src="https://cataas.com/cat?width=300&height=300" />
  45.           <img src="https://cataas.com/cat?width=300&height=300" />
  46.           <img src="https://cataas.com/cat?width=300&height=300" />
  47.           <img src="https://cataas.com/cat?width=300&height=300" />
  48.       </div>
  49.     </div>
  51.     <button class="left">left</button>
  52.     <button class="right">right</button>
  54. <!-- 结束代码段 -->
  56. 或者你可以使用现成的解决方案以获得一些高级变体
  57. 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 -->

  1. const wrapper = document.querySelector(&quot;.wrapper&quot;);
  2. const left = document.querySelector(&quot;.left&quot;);
  3. const right = document.querySelector(&quot;.right&quot;);
  5. left.addEventListener(&quot;click&quot;, () =&gt; {
  6.   wrapper.scrollBy({ left: -100, behavior: &quot;smooth&quot; });
  7. });
  9. right.addEventListener(&quot;click&quot;, () =&gt; {
  10.   wrapper.scrollBy({ left: 100, behavior: &quot;smooth&quot; });
  11. });

<!-- language: lang-css -->

  1. .wrapper {
  2.   margin: auto;
  3.   overflow-x: scroll;
  4.   max-width: 500px;
  5. }
  7. .image-group {
  8.   display: flex;
  9.   flex-wrap: wrap;
  10.   width: 1500px;
  11.   gap: 20px;
  12. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;app&quot;&gt;
  2.   &lt;div class=&quot;wrapper&quot;&gt;
  3.     &lt;div class=&quot;image-group&quot;&gt;
  4.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  5.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  6.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  7.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  8.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  9.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  10.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  11.       &lt;img src=&quot;https://cataas.com/cat?width=300&amp;height=300&quot; /&gt;
  12.   &lt;/div&gt;
  13. &lt;/div&gt;
  15. &lt;button class=&quot;left&quot;&gt;left&lt;/button&gt;
  16. &lt;button class=&quot;right&quot;&gt;right&lt;/button&gt;

<!-- end snippet -->

Or for some advanced variants you can use ready-made solutions
https://freefrontend.com/javascript-carousels/

huangapple
  • 本文由 发表于 2023年2月19日 18:34:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/75499498.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定