Question

我正在创建一个网站，并希望在我的页面上使用此现成的滑块。我已经将其添加到我的代码中，但是，左按钮不起作用。右键可以使用，但悬停在移动视图中消失。

我是Web开发的新手，因此仍然在学习。如果有人可以帮助，将不胜感激。该滑块的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>

我希望左侧按钮转到上一张幻灯片，而右侧按钮悬停在所有视图上

Answer 1

您的JavaScript代码不完整，您正在通过此代码监听右侧按钮的点击事件：

bound()

您还必须为左侧按钮添加代码，如下所示：

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; });。

滑块上的按钮无响应

1 个答案: