Lightweight vanilla javascript media and contents slider, by LCweb
Just 20KB to have:
$3
- single file, no dependencies, 100% pure javascript
- designed to be themed with no efforts (default theme included + extra theme for demo)
- themes mix support using prefixed selectors
- pure CSS sliding effects (default ones: slide - fade - fadeslide - zoom-in - zoom-out)
- slide anything. Literally. With specific support to:
- slideshow with optional autoplay and pause-on-hover
- carousel navigation
- integrated touchswipe support
- srcset images support
- super customizable and developer-friendly (w/ public functions and events)
Tested on all mordern browsers (don't ask for old IE support please)
For live demos check: https://lcweb.it/lc-micro-slider-javascript-plugin
Installation & Usage
1. include js/lc-micro-slider.min.js file
2. include a theme (eg. themes/default_theme.css)
3. 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
``
A colorful parrot!
Cat's eyes
Also some plain text!
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.
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
`
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