<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();
});