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

Posted 2023-05-08

【中文标题】到达最后一张幻灯片时，使用键盘左箭头键不应向左滚动

【英文标题】：Using keyboard left arrow key should not scroll to left when reach to last slide

【发布时间】：2021-04-30 01:56:38

【问题描述】：

我创建了包含 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()
        );
    
);

【问题讨论】：

光标键在您的代码笔上不起作用 - 但您似乎想使用与鼠标滚轮相同的逻辑，即$('.slide-container').animate( scrollLeft:

是的，没错，我想使用相同的逻辑。

【参考方案1】：

我试图重现你的例子，实现关键事件

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

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

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

参见下面的 sn-p ：

$('.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-->