简体   繁体   中英

How to change buttons for scrolling horizontally to scroll vertically

I'm making a video showcase that is wider than the actual screen, and right now you can scroll through them by holding the scroll bar at the bottom and moving it left-right. I want to make it so that you can use buttons to do that.

How it looks now:

How I want it to work:

Currently the buttons don't work

This is the code that I have so far, I modified a code that has buttons to move up and down, but I want mine to move the content left and right.

Original code: 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>

For me your code works just fine, I just had to add jQuery. Could it be that you did not load it in your html?

Have a look at this codepen , (it doesn't have nice css but the buttons work).

Try to add

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

before your own JavaScript

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM