javascript - slider 上的按钮没有响应

Question

我正在创建一个网站，并想在我的页面上使用这个现成的 slider 。我已将它添加到我的代码中，但是，左键不起作用。右键有效，但悬停在移动 View 中消失。

我是网络开发的新手，因此仍在学习中。如果有人可以提供帮助，将不胜感激。此 slider 的 CodePen 是 https://codepen.io/bryan-erwin/pen/dJEYVr

<header>
<div class="container" id="container">
  <div class="caption" id="slider-caption">
    <div class="caption-heading">
      <h1>Example</h1>
    </div>
    <div class="caption-subhead"><span></span></div><a class="btn" 
href="#"></a>
  </div>
  <div class="left-col" id="left-col">
    <div id="left-slider"></div>
  </div>
  <ul class="nav">
    <li class="slide-up">
      <a id="up_botton" href="#"><</a>
    </li>
    <li class="slide-down">
          <a id="down_button" href="#">></a>
        </li>
  </ul>
 </div>
 </header>

我希望左键转到上一张幻灯片，右键悬停以处理所有 View

Answer 1

您的 javascript 代码不完整您正在通过此代码监听右侧按钮单击事件:

let down_button = document.getElementById('down_button');

down_button.addEventListener('click',function(e){
  e.preventDefault();
  clearInterval(autoplay);
  nextSlide();
  autoplay;
});

您还必须像这样为左侧按钮添加代码:

let up_button = document.getElementById('up_button');

up_button.addEventListener('click',function(e){
  e.preventDefault();
  clearInterval(autoplay);
  prevSlide(); // you have to create this function
  autoplay;
});

为此，您还必须向左侧按钮添加一个 id="up_button"。