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)

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.

See the Pen LC micro slider - Customize skin and sliding effect by LCweb (@LCweb) on CodePen.

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.

See the Pen LC micro slider - mixing images, videos and texts by LCweb (@LCweb) on CodePen.

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.

See the Pen LC micro slider - Ken Burns effect by LCweb (@LCweb) on CodePen.

Parameters

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)

$('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() {
    ....
});