<h3>TSG Ticker Plugin</h3>
<div class="offers ticker">
		<ul>
				<li class="item active">10% off your first purchase when you <a href="#">sign up</a>!</li>
				<li class="item">Free Shipping on orders over $100!</li>
		</ul>
</div>

<h3>Bootstrap Carousel</h3>
<p>Using the Bootstrap Carousel with the TSG Ticker Plugin CSS to handle the transitions.</p>
<div class="offers carousel" data-ride="carousel" data-interval="5000">
		<ul>
				<li class="item active">10% off your first purchase when you <a href="#">sign up</a>!</li>
				<li class="item">Free Shipping on orders over $100!</li>
		</ul>
</div>

.offers {
		position: relative;
		height: 18px;
}

.offers .item {
		position: absolute;
		top: 0;
		-webkit-transition: -webkit-transform .3s ease-in, opacity .3s linear;
		-moz-transition: -moz-transform .3s ease-in, opacity .3s linear;
		-ms-transition: -ms-transform .3s ease-in, opacity .3s linear;
		-o-transition: -o-transform .3s ease-in, opacity .3s linear;
		transition: transform .3s ease-in, opacity .3s linear;
}

.offers .item:not(.active) {
		-webkit-transform: translateY(-100%);
		-moz-transition: translateY(-100%);
		-ms-transition: translateY(-100%);
		-o-transition: translateY(-100%);
		transform: translateY(-100%);
		opacity: 0;
}

/*!
 * TSG Ticker Plugin v1.0.0
 * http://www.thatstevensguy.com/
 *
 * Released under the MIT license.
 * Copyright 2015, That Stevens Guy
 */

(function($) {

		$.fn.ticker = function(options) {

				var settings = $.extend({
						timeout: 5000,
						targetClass: '.item',
						activeClass: '.active'
				}, options);

				this.each(function() {

						var ticker = $(this);
						var interval;

						$(ticker).on('mouseover', function() {
								pause(ticker);
						});

						$(ticker).on('mouseout', function() {
								start(ticker);
						});

						function start() {
								interval = setInterval(next, settings.timeout);
						}

						function pause() {
								clearInterval(interval);
						}

						function next() {
								var target;
								target = $(ticker).find(settings.targetClass + settings.activeClass).next();
								target = target.length ? target : $(ticker).find(settings.targetClass).first();
								$(ticker).find(settings.targetClass + settings.activeClass).removeClass(settings.activeClass.replace('.', ''));
								$(target).addClass(settings.activeClass.replace('.', ''));
						}

						start(this);

				});

		};

}(jQuery));

jQuery(document).ready(function($) {
		$('.ticker').ticker();
});