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?

  • Easy to use - just requires few lines of code!
  • Is modern! Completely CSS-based
  • As responsive as you need. Adapts to any size
  • Super-easy to customize using CSS
  • Touch-ready using TouchSwipe or AlloyFinger
  • Extendable using public methods and actions
  • Can slide anything! From a simple image to iframes, to texts
  • Has got an integrated images lazyloader to not affect page's speed
  • Everything in just 18KB! (JS + CSS, including sliding effects)
  • 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>
<html>
    <head>
        <link href="css/lc-micro-slider.min.css" rel="stylesheet" />
        <link href="css/default_style.css" rel="stylesheet" /> <!-- default skin -->
        
        <script src="https://code.jquery.com/jquery-1.11.2.min.js" 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;
        }
        </style">
    </head>
    <body>
        <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>
            </ul>

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

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.

  Parameters

ParameterDefault ValueDescription
slide_fx (string)fadeslideSliding effect. Options: none / fade / slide / v_slide / overlap / v_overlap / fadeslide / zoom-in / zoom-out
slide_easing (string)easeCSS animation easing to use. Options: ease / linear / ease-in (etc) [supports also cubic-bezier]
nav_arrows (bool)trueWhether to show navigation arrows
nav_dots (bool)trueWhether to show navigation dots
slideshow_cmd (bool)trueWhether to show play/pause button
carousel (bool)trueWhether to create a carousel or end navigation on last slide
touchswipe (bool)trueEnables touch interactions (requires TouchSwipe or AlloyFinger)
autoplay (bool)falseWhether to autoplay the slideshow
animation_time (int)700Time needed to skip to next slide (in milliseconds)
slideshow_time (int)5000Slide's showing time (in milliseconds)
pause_on_hover (bool)trueWhether 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)
$('the-slider-wrap').lcms_paginate('next');
Starts slideshow
$('the-slider-wrap').lcms_start_slideshow();
Stops slideshow
$('the-slider-wrap').lcms_stop_slideshow();
Destroy slider's object and data
$('the-slider-wrap').lcms_destroy();

Events

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() {
    ....
});
lcwebLC Micro Slider – jQuery Plugin