如何更改用于水平滚动到垂直滚动的按钮

Question

我正在制作一个比实际屏幕宽的视频展示柜，现在您可以通过按住底部的滚动条并左右移动来滚动浏览它们。我想这样做，以便您可以使用按钮来做到这一点。

现在的样子：

我希望它如何工作：

当前按钮不起作用

这是我到目前为止的代码，我修改了一个具有上下移动按钮的代码，但是我想让我左右移动内容。

原始代码：https://codepen.io/taneltm/pen/QjBbMW

HTML：

<button class="left"><</button>

    <div class="scrollmenu">

      <video class="featured"  controls> <source src="vid.mp4" 
       type="video/mp4"> </video>
      <video class="featured"  controls> <source src="vid.mp4" 
       type="video/mp4"> </video>
      <video class="featured"  controls> <source src="vid.mp4" 
       type="video/mp4"> </video>
      <video class="featured"  controls> <source src="vid.mp4" 
       type="video/mp4"> </video>
      <video class="featured"  controls> <source src="vid.mp4" 
        type="video/mp4"> </video>
       </div>
        <button class="right">></button>

---

JS：

  <script type="text/javascript">

   var $content = $('div.scrollmenu');

   function changeContentScroll(pos) {
     var currentPos = $content.scrollLeft();
     $content.scrollLeft(currentPos + pos);
   }

   function onright() {
     changeContentScroll(-10);
   }

   function onleft() {
     changeContentScroll(+10);
   }

   $('button.right').on('click', onleft);
   $('button.left').on('click', onright);
  </script>

---

Answer 1

对我来说，您的代码可以正常工作，我只需要添加jQuery。 可能是您没有将其加载到html中吗？

看看this codepen，（它没有漂亮的CSS，但是按钮起作用了。）

尝试添加

<script
    src="https://code.jquery.com/jquery-3.4.0.min.js"
    integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
    crossorigin="anonymous"></script>

在使用自己的JavaScript之前