Press "Enter" to skip to content

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

Lightweight vanilla javascript slider and its contents, by LCweb, move everything in vanilla javascript slider: only 20kb incl. LC-Micro-Slider is a simple, flexible, and customizable plugin that allows sliding through any web content with custom controls, animations, and support for touch events.

Top features list:

  • single file, no dependencies, 100% pure javascript.
  • designed to be themed with no effort (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:
    • images (with lazyloading)
    • HTML5 videos and iframes (eg. youtube embed)
  • mixed contents
  • slideshow with optional autoplay and pause-on-hover.
  • carousel navigation
  • integrated touch swipe support
  • super customizable and developer-friendly (w/ public functions and events)

slide anything plugin, content slider plugin, wordpress carousel slider with text without plugin, how to use slide anything plugin, image slider plugin free

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

Official Website(LCweb-ita): Click Here

This superior jQuery/javascript plugin is developed by LCweb-ita. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.