This time I will share jQuery Plugin and tutorial about Seamless Image Scroller For Bootstrap – jQuery scrollMove, hope it will help you in programming stack.
scrollMove is a responsive, horizontal scroller plugin for Bootstrap that allows to scroll through a list of images just like carousel or traditional marquee.
How to use it:
1. Include the Bootstrap’s stylesheet for the scroller.
1 |
<link rel="stylesheet" href="bootstrap.min.css"> |
2. Create a list of images for the scroller.
01 |
<ul class="items list-unstyled row"> |
02 |
<li class="item col-xs-4"> |
03 |
<img class="img-responsive" src="imgs/1.jpg" alt=""> |
05 |
<li class="item col-xs-4"> |
06 |
<img class="img-responsive" src="imgs/2.png" alt=""> |
08 |
<li class="item col-xs-4"> |
09 |
<img class="img-responsive" src="imgs/3.jpg" alt=""> |
11 |
<li class="item col-xs-4"> |
12 |
<img class="img-responsive" src="imgs/4.png" alt=""> |
14 |
<li class="item col-xs-4"> |
15 |
<img class="img-responsive" src="imgs/5.jpg" alt=""> |
17 |
<li class="item col-xs-4"> |
18 |
<img class="img-responsive" src="imgs/6.png" alt=""> |
3. Include jQuery library and the scrollMove.js script at the bottom of your web page.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="scrollMove.js"></script> |
4. Activate the plugin and pass the following parameters to the scroller.
- ele: container element
- frame: FPS
- step: how many list items to slide on each move
2 |
scrollMove('.items',60 ,1 ); |
This awesome jQuery plugin is developed by MirrorXu. For more Advanced Usages, please check the demo page or visit the official website.
