But.. wait.. another jQuery slider? Why?
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
| Parameter | Default Value | Description |
|---|---|---|
| slide_fx (string) | fadeslide | Sliding effect. Options: none / slide / fade / fadeslide / zoom-in / zoom-out |
| 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 plugin) |
| 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) | <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:$('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 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!