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
<!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:
$('the-slider-wrap').lcms_paginate('next');
$('the-slider-wrap').lcms_start_slideshow();
$('the-slider-wrap').lcms_stop_slideshow();
$('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() {
....
});