CODEWITHSUNDEEP
jquery
test
test

Reputation: 2466

jQuery show next prev items when keypress

i have list items: 

<ul>
  <li class="slides">
    <p>content</p>
  </li>
  <li class="slides">
    <p>content</p>
  </li>

.. etc

</ul>

and jQuery:

$(document.documentElement).keyup(function (e) {

  if (e.keyCode == 39)
  {
  }

  if (e.keyCode == 37)
  {
  }

});

How can i show next items when click keyboard 'right' and when press keyboard 'left' show prev items?

Upvotes: 0

Views: 2398

Answers (1)

Kyle Macey
Kyle Macey

Reputation: 8154

HTML

<ul>
  <li class="active slides">
    <p>content</p>
  </li>
  <li class="slides">
    <p>content</p>
  </li>

.. etc

</ul>

jQuery

$(document.documentElement).keyup(function (e) {
  var $activeslide = $('.slides.active'), $targetslide;

  if (e.keyCode == 39)
  {
    if ($activeslide.next('.slides').length) {
      $targetslide = $activeslide.next('.slides');
    } else {
      $targetslide = $('.slides:first');
    }
  }

  if (e.keyCode == 37)
  {
    if ($activeslide.prev('.slides').length) {
      $targetslide = $activeslide.prev('.slides');
    } else {
      $targetslide = $('.slides:last');
    }
  }

  $targetslide.addClass('active');
  $activeslide.removeClass('active');

});

CSS

.slides {
  display: none;
}

.slides.active {
  display: block;
}

Animate as you see fit.

Upvotes: 3

Related Questions