This time I will share jQuery Plugin and tutorial about Keyboard-enabled List Scroller With iOS Scroll Animation – jQuery listt, hope it will help you in programming stack.
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.
01 |
<div class="image-box"> |
02 |
<div class="bg active img1"> |
04 |
<h2>Description 1</h2> |
08 |
<h2>Description 2</h2> |
12 |
<h2>Description 3</h2> |
16 |
<h2>Description 4</h2> |
20 |
<h2>Description 5</h2> |
2. Create an unordered html list and specify the associated images using the data-img-bg attribute:
01 |
<div class="list-container"> |
02 |
<div class="list-sort"> |
04 |
<li data-img-bg="img4">04</li> |
05 |
<li data-img-bg="img5">05</li> |
06 |
<li class="current" data-img-bg="img1">01</li> |
07 |
<li data-img-bg="img2">02</li> |
08 |
<li data-img-bg="img3">03</li> |
3. Create next/prev navigation buttons.
1 |
<div class="arrow-left-box"> |
2 |
<i class="icon icon-caret-left"></i> Prev |
4 |
<img src="images/keypad-icon.svg" class="keys"> |
5 |
<div class="arrow-right-box"> |
6 |
Next <i class="icon icon-caret-right"></i> |
4. The necessary CSS styles. You can find the full CSS in the base.css.
1 |
<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.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"></script> |
4 |
<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.
