Slide Everything in the Vanilla Javascript Slider | LC-micro-slider

How to make use of it:

1. Put the LC-Micro-Slider plugin’s JavaScript and CSS information into your webpage which has the 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 supply the contact gestures assist.

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

3. Add your personal internet 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//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 want:

$('#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 strategies.

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

Mobile-friendly Anything Slider Plugin, LC-micro-slider Github

See Demo And Download