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

Mobile-friendly Anything Slider Plugin For jQuery - LC-Micro-Slider
File Size: Unknown
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

LC-Micro-Slider is a simple, flexible, customizable slider plugin for jQuery 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.

How to use it:

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

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/lc-micro-slider.js"></script>
<link rel="stylesheet" href="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
});

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