Keyboard-enabled List Scroller With iOS Scroll Animation - jQuery listt

listt is a jQuery based, keyboard-enabled list scroller which can be used to fade through a group of images with a vertical list based indicator.

Use navigation buttons or keyboard arrows to scroll through the indicator while switching between the images. Inspired by iOS' uipickerview.

How to use it:

1. Insert a group of images into the image box.

<div class="image-box">
  <div class="bg active img1">
    <img src="1.svg">
    <h2>Description 1</h2>
  </div>
  <div class="bg img2">
    <img src="2.svg">
    <h2>Description 2</h2>
  </div>
  <div class="bg img3">
    <img src="3.svg">
    <h2>Description 3</h2>
  </div>
  <div class="bg img4">
    <img src="4.svg">
    <h2>Description 4</h2>
  </div>
  <div class="bg img5">
    <img src="5.svg">
    <h2>Description 5</h2>
  </div>
</div>

2. Create an unordered html list and specify the associated images using the data-img-bg attribute:

<div class="list-container">
  <div class="list-sort">
    <ul class="list">
      <li data-img-bg="img4">04</li>
      <li data-img-bg="img5">05</li>
      <li class="current" data-img-bg="img1">01</li>
      <li data-img-bg="img2">02</li>
      <li data-img-bg="img3">03</li>
    </ul>
  </div>
</div>

3. Create next/prev navigation buttons.

<div class="arrow-left-box">
  <i class="icon icon-caret-left"></i>&nbsp;&nbsp;Prev
</div>
<img src="images/keypad-icon.svg" class="keys">
<div class="arrow-right-box">
  Next&nbsp;&nbsp;<i class="icon icon-caret-right"></i>
</div>

4. The necessary CSS styles. You can find the full CSS in the base.css.

<link rel="stylesheet" href="css/base.css">

5. Put jQuery library and the jQuery listt's JavaScript at the bottom of the webpage. That's it.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/index.js"></script>

---

This awesome jQuery plugin is developed by finchert. For more Advanced Usages, please check the demo page or visit the official website.