Slide everything into this jQuery slider! Just 13kb 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
  • Super easy to extend 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 13KB! (JS + CSS)

  • 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.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

ParameterDefault ValueDescription
slide_fx (string)fadeslideSliding effect. Options: none / slide / fade / fadeslide / zoom-in / zoom-out
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 plugin)
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)<span class=”lcms_loader”></span>HTML code overriding default slider’s loader

Public functions

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


Enjoyed this freebie and want to show some appreciation?

Offer me a cofee or two to continue coding!



lcwebLC Micro Slider – jQuery Plugin