seckie/jquery-ticker

text ticker jQuery plugin

jquery-ticker

Rewrite of jQuery.ticker

---

Required

jQuery (Developed on 2.1.1)

http://jquery.com/

---

Demos

http://seckie.github.io/jquery-ticker/demo

---

Usage

Step01

Load jquery.js and this plugin in "head" element

<script src="jquery.js"></script>
<script src="jquery.ticker.js"></script>

If you want to use "Velocity.js" animation, you have to load velocity.js in addition.

<script src="velocity.js"></script>

Step02

Set style display:inline-block: float:left; to elements of content.

<style>
.ticker-item {
  display: inline-block;
  float: left;
}
</style>

<div class="ticker">
<div class="ticker-item"> ... </div>
<div class="ticker-item"> ... </div>
<div class="ticker-item"> ... </div>
</div>

Step03

Get the content's parent element via jQuery selector, and fire the plugin with some options.

<script>
$(function() {
  $('.ticker').ticker(
    content: '.ticker-item'
  );
});
</script>

Options

option name	default value	data type	description
content	".ticker-item"	String (Selector String)	Content elements selector (required)
duration	500	Number	Duration of animation. If you set shorter, animation gets faster.
wrapperClassName	"ticker-wrapper"	String	Wrapper DIV that has this className will generate by the plugin.
innerClassName	"ticker-inner"	String	Inner DIV that has this className will generate by the plugin.
hoverStop	true	Boolean	Whether stop animation when mouseover
velocityJs	false	Boolean	Animate method'll be replaced by Velocity.js when you set it "true"

---

License

MIT License