Horizontal Ticker Animation In jQuery - Conveyor Ticker

The Conveyor Ticker jQuery plugin takes a list of strings and converts them into a horizontal infinite-looping scroller with support for pause on hover. Similar to the traditional marquee element. Suitable for news ticker, stock ticker, etc.

How to use it:

1. Create a normal HTML unordered list for the ticker/scroller.

<div class="js-conveyor-example">
  <ul>
    <li>
      <span>Horizontal Ticker Animation In jQuery</span>
    </li>
    <li>
      <a href="#">
        <span>I am a <b>hyperlink</b></span>
      </a>
    </li>
    <li>
      <span>Conveyor Ticker</span>
    </li>
    <li>
      <span>A Simple jQuery plugin</span>
    </li>
  </ul>
</div>

2. Import the jQuery Conveyor Ticker plugin's files along with the latest version of jQuery library into the document.

<link href="dist/css/jquery.jConveyorTicker.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="dist/js/jquery.jConveyorTicker.min.js"></script>

3. Call the function on the top container to activate the ticker/scroller.

$(function() {
  $('.js-conveyor-example').jConveyorTicker();
});

4. Customize the animation speed in milliseconds. Default: 200.

$(function() {
  $('.js-conveyor-example').jConveyorTicker({
    anim_duration: 500
  });
});

5. Reverse the direction of the ticker animation. Default: left to right.

$(function() {
  $('.js-conveyor-example').jConveyorTicker({
    reverse_elm: true
  });
});

6. Force the infinite loop when the aggregated width of the items is smaller than the width of the frame. Default: false.

$(function() {
  $('.js-conveyor-example').jConveyorTicker({
    force_loop: true
  });
});

7. Determine whether to pause the ticker on init. Default: false.

$(function() {
  $('.js-conveyor-example').jConveyorTicker({
    start_paused: true
  });
});

8. API methods.

window.instance = $('.js-conveyor-example').jConveyorTicker();

// Play the ticker
instance.playAnim();    

// Pause the ticker
instance.pauseAnim();   

// Re-init the ticker
instance.init();

// Destroy the instance
instance.destroy(); 

Changelog:

v1.1.0 (2020-05-30)

• Refactored to have public methods.
• New methods 'pauseAnim', 'playAnim', 'init' and 'destroy'
• New option 'start_paused' to inititalize in a paused state.

v1.0.2 (2018-12-19)

• Added option to force loop when the aggregated width of the items is smaller than the width of the frame.

---

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