到达最后一张幻灯片时，使用键盘左箭头键不应向左滚动

Question

我创建了包含 5 张幻灯片的滑块。

它实际上是鼠标滚轮滚动水平滑块，但我希望应该有使用键盘左右箭头键滚动幻灯片的选项。我在下面做了一些 jquery 有效。

但是当我第 6 次按向左箭头键时，最后（第 5）张幻灯片向左移动并显示空白屏幕。右箭头键也一样。我预计当我第 6 次按下左箭头键时，

它应该不起作用或最后一张幻灯片没有向左移动。请帮我解决这个问题。

请看我的codepen

jquery

$('body').keydown(function(e) {
    if(e.keyCode == 37) { // left
        $('.slide').animate({
            left: '-=' + $('.slide').innerWidth()
        });
    }   
    else if(e.keyCode == 39) { // right
        $('.slide').animate({
            left: '+=' + $('.slide').innerWidth()
        });
    }
});

Answer 1

我尝试重现你的例子，实现按键事件

你应该知道我已经添加了一个条件来防止额外的滚动，所以你的幻灯片将通过使用幻灯片的宽度来滚动；

if($(this).is(':animated')) return;

我还使用箭头键添加了滚动：

请参阅以下代码段：

$('.slide-container').on('mousewheel DOMMouseScroll', function(event) {
  if ($(this).is(':animated')) return;

  var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));
  $(this).animate({
    scrollLeft: ($(this).scrollLeft() - (delta * $('.slide').innerWidth()))
  }, 200);
  event.preventDefault();
  var $numbers = $('.indicator').children();
  //check delta value 1 or -1
  var count = (delta == -1) ? $(".indicator .active").index() + 1 : $(".indicator .active").index() - 1;
  //if count is less then divs and not -1
  if (count < $('.indicator').children().length && count != -1) {
    //add active class there
    $numbers.eq(count).addClass('active').siblings().removeClass('active');
  }
});

$('body').keydown(function(e) {

  if ($(".slide-container").is(':animated')) return;

  var $indicators = $('.indicator').children();
  var count = -1;
  if (e.keyCode == 37) { // left
    $(".slide-container").animate({
      scrollLeft: $(".slide-container").scrollLeft() + ($('.slide').innerWidth())
    }, 200);

    count = $(".indicator .active").index() + 1

  } else if (e.keyCode == 39) { // right
    $(".slide-container").animate({
      scrollLeft: $(".slide-container").scrollLeft() + (-$('.slide').innerWidth())
    }, 200);

    count = $(".indicator .active").index() - 1
  }


  if (count < $('.indicator').children().length && count != -1) {
    //add active class there
    $indicators.eq(count).addClass('active').siblings().removeClass('active');
  }
});

body {
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  border: 1px solid black;
}

* {
  margin: 0;
  padding: 0;
}

.header {
  position: fixed;
  width: 100%;
  text-align: center;
  background: yellow;
}

.horizontal-scroll-section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.slide-container {
  display: flex;
  width: 90%;
  height: 80%;
  overflow-x: hidden;
  scroll-snap-type: X proximity;
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  font-size: 36px;
}

.slide:nth-child(odd) {
  background: red;
}

.slide:nth-child(even) {
  background: blue;
}

.indicator {
  position: absolute;
  top: 50%;
  left: 10px;
  color: black;
}

.indicator div {
  opacity: .5;
}

.indicator div.active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="continer">
  <div class="header">
    <h1 class="title"> Horizontal Scrolling </h1>
    <span>(Use Mousewheel)</span>
  </div>


  <div class="horizontal-scroll-section">
    <div class="slide-container">
      <div class="slide">A</div>
      <div class="slide">B</div>
      <div class="slide">C</div>
      <div class="slide">D</div>
      <div class="slide">E</div>
    </div>
  </div>

  <span class="indicator">
            <div class="active">&#9472;</div>
            <div>&#9472;</div>
            <div>&#9472;</div>
            <div>&#9472;</div>
      <div>&#9472;</div>
        </span>

</div>
<!--continer ends here-->

到达最后一张幻灯片时，使用键盘左箭头键不应向左滚动

Using keyboard left arrow key should not scroll to left when reach to last slide

javascript

jquery

slider

jquery-animate