Seamless Image Scroller For Bootstrap - jQuery scrollMove

Seamless Image Scroller For Bootstrap - jQuery scrollMove
File Size: 3.98 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

<link rel="stylesheet" href="bootstrap.min.css">

2. Create a list of images for the scroller.

<ul class="items list-unstyled row">
  <li class="item col-xs-4">
    <img class="img-responsive" src="imgs/1.jpg" alt="">
  </li>
  <li class="item col-xs-4">
      <img class="img-responsive" src="imgs/2.png" alt="">
  </li>
  <li class="item col-xs-4">
    <img class="img-responsive" src="imgs/3.jpg" alt="">
  </li>
  <li class="item col-xs-4">
    <img class="img-responsive" src="imgs/4.png" alt="">
  </li>
  <li class="item col-xs-4">
    <img class="img-responsive" src="imgs/5.jpg" alt="">
  </li>
  <li class="item col-xs-4">
    <img class="img-responsive" src="imgs/6.png" alt="">
  </li>
</ul>

3. Include jQuery library and the scrollMove.js script at the bottom of your web page.

<script src="/path/to/jquery.min.js"></script>
<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
// scrollMove( ele ,frame ,step )
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.