Totem makes vertical tickers easy to implement by:

  • Turning a list of items into an animated ticker that auto-advances
  • Specifying anchors for stop, start, next, and previous navigation links.


Load jquery.totemticker.js or the minified jquery.totemticker.min.js script. Call the totemticker function on a UL or OL element. An example is below.

row_height  :   '100px',
next        :   '#ticker-next',
previous    :   '#ticker-previous',
stop        :   '#stop',
start       :   '#start',


Use cases with varying options.


The following options are available via the plugin array. Defaults are listed below.

next        :   null
previous    :   null
stop        :   null
start       :   null
row_height  :   '100px'
speed       :   800
interval    :   4000
max_items   :   null
mousestop   :   false
direction	:	'down'

previous, next

CSS ID's of next and previous buttons. Next scrolls the ticker down, and previous scrolls up. Example Value: "#nextbutton"

start, stop

CSS ID's of stop and start buttons. Example Value: "#stopbutton"


Height of each ticker row in PX. Should be uniform and formatted as a string. Example Value: "100px"


Speed of transition animation in milliseconds. Example Value: 800


Optional. Integer for how many items to display at once. Resizes height and overflow clipping accordingly. Example Value: 3


If set to true, the ticker will stop while mouse is hovered over it


Direction that list will scroll (down or up)

Some Notes

The demos section (also included in the download) can act as template/good start for many projects.


Released under the MIT License

If you want to share this plugin with others, we'd appreciate a link back to this post. Please avoid directly linking to the download. Other than that, if you feel so inclined, provide a link back if you end up using it (not required, but appreciated).