Last active
February 23, 2019 19:24
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
;(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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul id="micro-carousel"> | |
<li>Etiam quis felis iaculis magna vulputate tristique in in justo.</li> | |
<li>Curabitur et sapien vel neque aliquet dapibus.</li> | |
<li>Nam pretium sodales nisi, ac sagittis diam rhoncus vel.</li> | |
<li>Aliquam condimentum lobortis diam, tempor dictum justo fermentum nec.</li> | |
<li>Etiam semper iaculis tortor, ut ultrices mi tristique non.</li> | |
<li>Maecenas a dolor ac libero fermentum pulvinar sit amet a sem.</li> | |
</ul> | |
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> | |
<script type="text/javascript" src="jquery.microcarousel.js"></script> | |
<script> | |
jQuery(document).ready(function($) { | |
$("#micro-carousel").microcarousel(); | |
}); | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{ | |
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