jquery.finescroller

Bare-bones resolution-independent infinite horizontal items scroller. Uses jquery.transit for smooth CSS transitions.

Usage no npm install needed!

<script type="module">
  import jqueryFinescroller from 'https://cdn.skypack.dev/jquery.finescroller';
</script>

README

jquery.fineScroller

Bare-bones size-independent infinite horizontal items scroller jQuery plugin. Optionally uses jquery.transit library (if loaded) to provide smooth CSS animation if supported by browser. Falls back to jQuery.animate().

  • can't get any more lightweight than this
  • adapts to your html and styles
  • as minimal and unopinionated as it gets

Usage

$('.item-container').fineScroller();

Default HTML structure

<div class="item-container">
    <div class="item">
        Single Item
    </div>

    <div class="item">
        Single Item
    </div>
</div>

Options

  • cycleTime : time in ms to do a full cycle. default: 1000
  • duplicates : if the scrolling leaves empty space, add some item duplicates to fill up the container. default: 0
  • sliderItem : override the default inner item selector of '.item'

Install using Bower

bower install jquery.fineScroller --save-dev