Slide everything into this javascript slider! Just 19kb all-inclusive, is super extensible and customizable.
There are dozens of sliders, so, why use this?
- Pure javascript, no dependencies
- Easy to use - just requires few lines of code
- Is modern! Completely CSS-based
- As responsive as you need. Adapts to any size
- Themes-based. You can also use multiple themes on the same page
- Built-in touch swipe integration
- Extendable using public functions 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
- Supporting HTML5 srcset for best mobile performances
Basic demo
Mixed Contents
Custom theme
Ken Burns effect
Basic demo
Mixed Contents
Custom theme
Ken Burns effect
Installation & Usage
- include js/lc-micro-slider.min.js file
- include a theme (eg. themes/default_theme.css)
- initialize plugin targeting one/multiple properly composed page elements
NB: first parameter may be a textual selector or a DOM object (yes, also jQuery objects)
Few notes anout the HTML structure:
- the target element must contain a UL list. Each list element will be a slide
- is suggested to use the “data-type” attribute. Possible values: image, video, iframe, mixed
Can be globally defined using *fixed_slide_type* option - the “data-img” or “data-srcset” attribute defines slide’s background and is lazyloaded
<div id="slider_wrap">
<ul style="display: none;">
<li data-img="../demo_assets/parrot.jpg" data-type="image">A colorful parrot!</li>
<li data-srcset="../demo_assets/cat.jpg 1920w, ../demo_assets/cat_1024.jpg 1024w, ../demo_assets/cat_512.jpg 512w">Cat's eyes</li>
<li data-type="video">
<iframe style="height: 100%; width: 100%;" src="https://player.vimeo.com/video/40291524?rel=0" frameborder="0" allowfullscreen></iframe>
</li>
<li data-type="iframe">
<video controls autoplay muted>
<source src="../demo_assets/squirrel.mp4" type="video/mp4">
</video>
</li>
<li data-img="../demo_assets/cat.jpg" data-type="mixed">
<h4 id="txt_heading">Also some plain text!</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p> <p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est</p>
</li>
</ul>
</div>
<script type="text/javascript">
new lc_micro_slider('#slider_wrap', {
addit_classes : ['lcms_default_theme'] // always specify which theme to use
});
</script>
Options
Here are listed available options with default values
new lc_micro_slider('#slider_wrap', {
// (string) sliding effect / none - slide - fade - fadeslide - zoom-in - zoom-out
slide_fx : 'fadeslide',
// (string) CSS animation easing to use / ease - linear - ease-in (etc) [supports also cubic-bezier]
slide_easing : 'ease',
// (bool) shows navigation arrows
nav_arrows : true,
// (bool) shows navigation dots
nav_dots : false,
// (bool) whether to add slideshow commands (play/pause)
slideshow_cmd : true,
// (bool) whether to use carousel navigation
carousel : true,
// (bool) whether to enable touch navigation
touchswipe : true,
// (bool) whether to autostart slideshow
autoplay : false,
// (int) animation timing in millisecods / 1000 = 1sec
animation_time : 700,
// (int) interval time of the slideshow in milliseconds / 1000 = 1sec
slideshow_time : 5000,
// (bool) whether to pause and restart slideshow on hover
pause_on_hover : true,
// (bool) whether to pause slideshow on HTML video play
pause_on_video_play : false,
// (string) extra HTML code to be injected in the slider to add further commands
extra_cmd_code : '',
// (string) defines a fixed slide type fallback. Is overrided by speific data-type attribute. Possible values: image, video, iframe, mixed
fixed_slide_type : '',
// (string) loading animation HTML code
loader_code : '<span class="lcms_loader"></span>',
// (array) additional classes attached to the slider wrapper. Use it also to define the attached theme
addit_classes : [],
});
Mixing themes
You can use multiple themes in the same page. Be sure to prefix every theme’s CSS rule with the class you will use.
For example .lcms_light_theme and .lcms_dark_theme
<link href="themes/light.css" rel="stylesheet" type="text/css">
<link href="themes/dark.css" rel="stylesheet" type="text/css">
<script type="text/javascript>
new lc_micro_slider('#slider_wrap1', {
addit_classes : ['lcms_light_theme'] // always specify which theme to use
});
new lc_micro_slider('#slider_wrap2', {
addit_classes : ['lcms_dark_theme'] // always specify which theme to use
});
</script>
Public Functions
There are several public functions you can call wherever in your webpages on initialized elements
const target_el = '#slider_wrap';
new lc_micro_slider(target_el, {
addit_classes : ['lcms_default_theme']
});
// starts slideshow (pass a selector string or DOM element object)
lcms_play(target_el);
// stops slideshow (pass a selector string or DOM element object)
lcms_stop(target_el);
// move to a slide (pass a selector string or DOM element object)
lcms_slide(target_el, slide_index);
Public Events
Here arethe available events, globally triggerd on initialized elements
const $el = document.getElementById('slider_wrap');
// dispatched whenever slider structure is ready, before injecting the first slide
$el.addEventListener('lcms_ready', (e) => {
...
});
// dispatched whenever a new slide is shown (after lazyload)
$el.addEventListener('lcms_slide_shown', (e) => {
// e.detail.slide_index - (int) slide index
// e.detail.slide_data - (object) slide data
});
// dispatched whenever a slide action is performed
$el.addEventListener('lcms_changing_slide', (e) => {
// e.detail.new_index - (int) incoming slide index
// e.detail.slide_data - (object) incoming slide data
// e.detail.curr_index - (int) current (to be removed) slide index
});
// dispatched whenever the new slide is in its final position
$el.addEventListener('lcms_new_active_slide', (e) => {
// e.detail.new_index - (int) new slide index
// e.detail.slide_data - (object) new slide data
});
// dispatched whenever slider slideshow plays
$el.addEventListener('lcms_play_slideshow', (e) => {
...
});
// dispatched whenever slider slideshow stops
$el.addEventListener('lcms_stop_slideshow', (e) => {
...
});
Extras
Slider dynamic variables are stored in the DOM object. This might be useful to retrieve or alterate slider data once it has been initialized.
Inspect the initial plugin’s code part to know which vars are used
const $el = document.getElementById('slider_wrap');
const instance = new lc_micro_slider($el, {
addit_classes : ['lcms_default_theme']
});
// retrieve currently shown slide index
const active_index = $el.lcms_vars.shown_slide; // (int)
// know whether slideshow is playing
const active_index = $el.lcms_vars.is_playing; // (bool)
// inject a new slide and eventually refresh dots navigation
$el.lcms_vars.slides.push({
type : 'image', // (string) slide type - Possible values: image, video, iframe, mixed
content : 'The caption!', // (string) what you normally defines into the slide <li> tag,
img : 'the-image-url.jpg', // (string|bool) data-img attribute set for <li> tag or false if not set
classes : '' // (string) eventual extra classes
});
instance.populate_dots($el);