LC Micro Slider

jQuery Plugin

Slide everything into this jQuery slider! Just 18kb all-inclusive, is super extensible and customizable.
But.. wait.. another jQuery slider? Why?

  • A frozen fox!
  • What a kind Ibex

Basic Implementation

Only requirement is jQuery v1.5 (or later), this is a basic implementation in a standard web page structure (using the default skin included in the package). This is the most basic iplementation you could make. Pay attention to lcms_img attribute. There you have to put image URL to be lazyloaded and used as background.
<!doctype html>
        <link href="css/lc-micro-slider.min.css" rel="stylesheet" />
        <link href="css/default_style.css" rel="stylesheet" /> <!-- default skin -->
        <script src="" type="text/javascript"></script>
        <script src="js/lc-micro-slider.min.js" type="text/javascript"></script>
        <!-- let's shape slider's wrapper -->
        <style type="text/css">
        #slider_wrap {
           width: 70%;
	   max-width: 600px;
	   height: 58vw;
           max-height: 400px;	
	   background: #eee;
        <div id="slider_wrap">
            <ul style="display: none;">
                <li lcms_img="the_image_url">test 1</li>
                <li lcms_img="the_image_url">Any content</li>
                <li lcms_img="the_image_url">test 3</li>

        <!-- let's initialize -->
        <script type="text/javascript">
        $(document).ready(function(e) {
             $(' #slider_wrap').lc_micro_slider();

Custom skin, and sliding effect

Let’s play with CSS! In this exaple the default skin has been ignored and not only changed from scratch, but ther is also a new vertical sliding effect.
But there’s even more: hover the slider, a progress animation has been added to play/pause button!

Everything in just 220 code lines: no tricks or external dependecies.

Mixing elements

Let’s use something a bit more advanced now: mix different content types! Everything is done just using a bit of custom CSS and three extra classes.

In HTML code you’ll note that “lcms_contents_fullheight”, “lcms_txt_padding” and “lcms_nopadding” classes have been used. They are applied to slides, allowing you to manage every specific slide in the way you prefer.

Then used a vimeo frame and set it to fill slider without padding. While for text, did the same, but increasing padding.

Ken Burns effect!

LC micro slider is so extensible that you can also create a Ken Burns effect just with few javascript lines!
Is an advanced technique taking advantage of “lcms_initial_slide_shown” and “lcms_new_active_slide” events.


Parameter Default Value Description
slide_fx (string) fadeslide Sliding effect. Options: none / fade / slide / v_slide / overlap / v_overlap / fadeslide / zoom-in / zoom-out
slide_easing (string) ease CSS animation easing to use. Options: ease / linear / ease-in (etc) [supports also cubic-bezier]
nav_arrows (bool) true Whether to show navigation arrows
nav_dots (bool) true Whether to show navigation dots
slideshow_cmd (bool) true Whether to show play/pause button
carousel (bool) true Whether to create a carousel or end navigation on last slide
touchswipe (bool) true Enables touch interactions (requires TouchSwipe or AlloyFinger)
autoplay (bool) false Whether to autoplay the slideshow
animation_time (int) 700 Time needed to skip to next slide (in milliseconds)
slideshow_time (int) 5000 Slide’s showing time (in milliseconds)
pause_on_hover (bool) true Whether to stop slideshow on hover
loader_code (text) HTML code overriding default slider’s loader

Mixing elements

There are also four public functions you can use on initialized elements:

Paginate slider. You can use "next", "prev" or slide's number (first slide == zero)
Starts slideshow
Stops slideshow
Destroy slider's object and data


LC micro slider also triggers seven events to help developers in advanced usages. Here’s the list:

// triggered when slider is ready to show first element
$('body').delegate('the-slider-wrap', 'lcms_ready', function() {
// triggered when first slide is shown (and eventual image has been loaded)
$('body').delegate('the-slider-wrap', 'lcms_initial_slide_shown', function(slide_index, slide_object) {

// triggered when slide is shown (and eventual image has been loaded)
$('body').delegate('the-slider-wrap', 'lcms_slide_shown', function(slide_index, slide_object) {

// triggered before changing slide
$('body').delegate('the-slider-wrap', 'lcms_changing_slide', function(new_slide_index, slide_object, old_slide_index) {

// triggered when new slide finished replacing old one
$('body').delegate('the-slider-wrap', 'lcms_new_active_slide', function(new_slide_index, slide_object, old_slide_index) {

// triggered when slideshow starts
$('body').delegate('the-slider-wrap', 'lcms_play_slideshow', function() {

// triggered when slideshow ends
$('body').delegate('the-slider-wrap', 'lcms_stop_slideshow', function() {