Skip to content

Instantly share code, notes, and snippets.

@ourmaninamsterdam
Last active February 23, 2019 19:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ourmaninamsterdam/4555928 to your computer and use it in GitHub Desktop.
Save ourmaninamsterdam/4555928 to your computer and use it in GitHub Desktop.
Super compact jQuery vertical text carousel plugin, with variable content-based slide latency. < 0.5k minified.
;(function($) {
$.fn.microcarousel = function(options) {
var settings = $.extend({
timer_latency : 40
}, options);
return this.each(function() {
var timer, $wrapper = $(this);
$wrapper.children().addClass("slide");
timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
function switch_slide() {
$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
$(this).css({"margin-top": 0}).appendTo($wrapper);
clearTimeout(timer);
timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
});
}
});
};
})(jQuery);
(function(a){a.fn.microcarousel=function(b){var c=a.extend({timer_latency:40},b);return this.each(function(){var f,e=a(this);e.children().addClass("slide");f=setTimeout(d,e.find(".slide:eq(0)").text().length*c.timer_latency);function d(){e.find(".slide:eq(0)").animate({"margin-top":-e.height()},function(){a(this).css({"margin-top":0}).appendTo(e);clearTimeout(f);f=setTimeout(d,a(this).text().length*c.timer_latency)})}})}})(jQuery);
*{
margin: 0;
padding: 0;
}
#micro-carousel{
border: 1px solid #ccc;
height: 200px;
overflow: hidden;
}
#micro-carousel li{
list-style: none;
height: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment