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

Question

I created slider having 5 slides.

It's actually mouse wheel scroll horizontal slider, But I want that there should be option to use of keyboard left and right arrow keys to scroll slides. I do some below jquery that works.

But when I press left arrow key at 6th time, last (5th) slide goes left and blank screen show. And same for right arrow key. I expect when I press left arrow key at 6th time,

it should not work or last slide not move to left. Please help me to solve this.

Please see My 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()
        });
    }
});

Cursor keys aren't working on your codepen - but it seems you want to use the same logic that you do for mousewheel, ie $('.slide-container').animate({ scrollLeft: — freedomn-m

Spring Spring · Accepted Answer · 2021-01-26T09:50:00

I tried to reproduce your example , to achieve key event

you should know that I've added a condition to prevent extra scroll , so your slide will scroll by using exactly the width of slides ;

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

also I've added scroll using key arrow :

see below snippet :

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

1 Answers