Mobile-friendly Anything Slider Plugin - LC-Micro-Slider

LC-Micro-Slider is a simple, flexible, customizable slider plugin that allows to slide through any web content with custom controls, animations, and touch events support.

Key features:

• Fully responsive and mobile-friendly
• 5 built-in animations.
• Content loading indicator.
• Autoplay with pause on hover.
• Infinite carousel mode.
• Lots of options, methods and events.

Table Of Contents:

• jQuery Version
• Vanilla JavaScript Version

How to use it (jQuery Version):

1. Put the LC-Micro-Slider plugin's JavaScript and CSS files into your webpage which has jQuery library loaded.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/lc-micro-slider.js"></script>
<link rel="stylesheet" href="/path/to/css/lc-micro-slider.css" />

2. Load the jQuery TouchSwipe plugin to provide the touch gestures support.

<script src="jquery.touchSwipe.min.js"></script>

3. Add your own web content to the slider following the markup structure like this:

<div id="slide_wrap">
  <ul style="display: none;">
    <li lcms_img="1.jpg">test 1</li>
    <li class="lcms_contents_fullheight lcms_nopadding">
      <iframe style="height: 100%; width: 100%;" src="//player.vimeo.com/video/40291524?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
    </li>
    <li lcms_img="2.jpg"></li>
    <li lcms_img="3.jpg">test 3</li>
  </ul>
</div>

4. Initialize the slider with default settings.

$('#slide_wrap').lc_micro_slider();

5. Config the slider whatever you like:

$('#slide_wrap').lc_micro_slider({

  // slide - fade - fadeslide - zoom-in - zoom-out
  slide_fx    : 'fadeslide', 

  // shows navigation arrows 
  nav_arrows    : true,   

  // shows navigation dots
  nav_dots    : true,   

  // shows slideshow commands (play/pause)
  slideshow_cmd : true,   

  // non-stop carousel
  carousel    : true,   

  // enable touch navigation (requires jquery.touchSwipe.js)
  touchswipe    : true,   

  // starts the slideshow
  autoplay    : false,  

  // animation timing in millisecods / 1000 = 1sec
  animation_time  : 700,    

  // interval time of the slideshow in milliseconds / 1000 = 1sec 
  slideshow_time  : 5000,   

  // pause and restart the autoplay on box hover
  pause_on_hover  : true,   

  // loading animation
  loader_code   : '<span class="lcms_loader"></span>' 
  
});

6. API methods.

// goes to next slide
$('#slide_wrap').lcms_paginate('next');

// Starts slideshow
$('#slide_wrap').lcms_start_slideshow();

// Stops slideshow
$('#slide_wrap').lcms_stop_slideshow();

// Destroy slider’s object and data
$('#slide_wrap').lcms_destroy();

7. Events.

// when slider is ready to show first element
$('#slide_wrap').delegate('the-slider-wrap', 'lcms_ready', function() {
    // do something
});

// when first slide is shown (and eventual image has been loaded)
$('#slide_wrap').delegate('the-slider-wrap', 'lcms_initial_slide_shown', function(slide_index, slide_object) {
    // do something
});

// when slide is shown (and eventual image has been loaded)
$('#slide_wrap').delegate('the-slider-wrap', 'lcms_slide_shown', function(slide_index, slide_object) {
    // do something
});

// before changing slide
$('#slide_wrap').delegate('the-slider-wrap', 'lcms_changing_slide', function(new_slide_index, slide_object, old_slide_index) {
    // do something
});

// when new slide finished replacing old one
$('#slide_wrap').delegate('the-slider-wrap', 'lcms_new_active_slide', function(new_slide_index, slide_object, old_slide_index) {
    // do something
});

// when slideshow starts
$('#slide_wrap').delegate('the-slider-wrap', 'lcms_play_slideshow', function() {
    // do something
});

// when slideshow ends
$('#slide_wrap').delegate('the-slider-wrap', 'lcms_stop_slideshow', function() {
    // do something
});

How to use it (Vanilla JS Version):

1. Import the LC-Micro-Slider plugin's JavaScript and CSS files into your webpage.

<link rel="stylesheet" href="/path/to/themes/default_theme.css" />
<link rel="stylesheet" href="/path/to/themes/demo_extra_theme.css" />
<script src="/path/to/lc-micro-slider.min.js"></script>

2. Add content to the slider.

<div id="slide_wrap">
  <ul style="display: none;">
    <li data-img="1.jpg">Image</li>
    <li>
      <iframe style="height: 100%; width: 100%;" src="https://player.vimeo.com/video/40291524?rel=0" frameborder="0" allowfullscreen></iframe>
    </li>
    <li>
      <video controls autoplay muted>
        <source src="1.mp4" type="video/mp4">
      </video> 
    </li>
  </ul>
</div>

3. Initialize the plugin and done.

new lc_micro_slider('#slide_wrap', {
    // options here
});

4. Available options to customize the slider..

new lc_micro_slider('#slide_wrap', {

    // slide - fade - fadeslide - zoom-in - zoom-out
    slide_fx: 'fadeslide', 

    // easing: ease - linear - ease-in (etc)
    slide_easing: 'ease', 

    // shows navigation arrows 
    nav_arrows: true,   

    // shows navigation dots
    nav_dots: true,   

    // shows slideshow commands (play/pause)
    slideshow_cmd: true,   

    // non-stop carousel
    carousel: true,   

    // enable touch navigation
    touchswipe: true,   

    // starts the slideshow
    autoplay: false,  

    // animation timing in millisecods / 1000 = 1sec
    animation_time: 700,    

    // interval time of the slideshow in milliseconds / 1000 = 1sec 
    slideshow_time: 5000,   

    // pause and restart the autoplay on box hover
    pause_on_hover: true,

    // whether to pause slideshow on HTML video play  
    pause_on_video_play: false,    

    // extra HTML code to be injected in the slider to add further commands 
    extra_cmd_code: '',       

    // loading animation
    loader_code: '<span class="lcms_loader"></span>',

    // additional classes attached to the slider wrapper
    addit_classes: [],
       
});

5. API methods.

// start the slider
lcms_play(target_el); 

// stop the slider
lcms_stop(target_el); 

// go to a specific slide
lcms_slide(target_el, slide_index); 

6. Events.

$el.addEventListener('lcms_ready', (e) => {
  // do something
});

$el.addEventListener('lcms_slide_shown', (e) => {
  // e.detail.slide_index - (int) slide index
  // e.detail.slide_data - (object) slide data 
});

$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
});

$el.addEventListener('lcms_new_active_slide', (e) => {
  // e.detail.new_index - (int) new slide index
  // e.detail.slide_data - (object) new slide data 
});

$el.addEventListener('lcms_play_slideshow', (e) => {
  // do something
});

$el.addEventListener('lcms_stop_slideshow', (e) => {
  // do something
});

Changelog:

v2.1.2 (2024-09-29)

• improved CSS transitions code
• fixed slide images cache usage

v2.1.1 (2023-08-29)

• added: srcset support
• fixed: CSS animation glitch on animation's end
• minor code refactoring
• fixed: webkit issues with srcset decoding

v2.0.2 (2021-05-13)

• fixed: swipe navigation on nav dots
• added: lcms_first_populated event

v2.0.1 (2021-04-28)

• Rewritten using Vanilla JS

2017-11-04

• v1.3.1

---

This awesome jQuery plugin is developed by LCweb-ita. For more Advanced Usages, please check the demo page or visit the official website.