miSlider jQuery Plugin

Multi-item Slider or miSlider is an open-source jQuery slider plugin specifically designed for displaying multiple images or slides of content. The slider can be configured to display one slide at a time, as many slides as possible or anything in between.

Version: 0.1.14
Contributors: jbowyers
Donate link:
Tags: slider, jQuery, plugin, carousel, image, gallery, multiple, images
Requires: jQuery
License: GPLv3
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Highlights

Easy to use
Supports one or more slides on screen
Slides can be single images or complex HTML
Lightweight
Only requires jQuery core
Responsive - Can automatically calculate the number of slides that fit on screen
Easily customizable
Callbacks for slider events
Cross-Browser Support - Supports IE8+
Supports More than 1 slider per page

Download Source

Download miSlider zip or visit miSlider on GitHub

Quickstart

The fastest way to start using miSlider is to download miSlider, copy the demo folder to your project and adapt the html and css as needed.

You can also install mislider in your project using Bower package manager.

Full list of Options

The following are setting that can be customized:

Speed of the slide transition
Slide pause time between transitions
Number of slides to increment
Height of the slider
Number of slides visible on screen at one time
Continuous motion - Slides loop continuously in one direction
Location of the current slide on screen - left, center, right
Slide to start on.
Width of the current slide
Scaling factor of the current slide - Other slides are scaled down.
Vertical offset of the slide center - Useful when slide images are not in the center of the slide
Transition to clicked slide
Center slide contents vertically - Centers oversized slides vertically
Enable & disable Navigation Dots
Enable & disable Arrow Buttons
Arrow Buttons transparency
Randomize the order of the slides
Slides loaded callback function
Slide transition before callback function
Slide transition complete callback function
CSS class name that will be applied to the Stage element
CSS class name that will be applied to the Slider element
CSS class name that will be applied to each Slide element
CSS class name that will be applied to Arrow Buttons element
CSS class name that will be applied to the Navigation Dots element
Selector used to select the Slider element
Selector used to select each Slide element

Demos

Visit the miSlider website for demos - www.mislider.com

Problems with Setup and Configuration

For issues with installation and configuration visit Stack Overflow.

Bugs and Feature Requests

Please report bugs and suggestions for features to GitHub issues.

Installation

Download and extract miSlider
Add the miSlider Plugin to your project - Copy the 'mislider.min.js' file to the scripts folder for your website and the 'mislider.min.css' file to the css folder
Create the slides markup - Open the HTML page in which you want to add the slider and add the HTML. You can use any tags you like as long as you have elements for each slide, contained within an element for the slider, contained within an element for the stage. Example:
```
  <div class="mis-stage">
      <ol class="mis-slider">
          <li class="mis-slide">
              <img src="images/garden01.jpg" alt="Lillies">
          </li>
          <li class="mis-slide">
              <img src="images/garden02.jpg" alt="Pond">
          </li>
      </ol>
  </div>
```
Note: The classes are not required and will be automatically added by the plugin if absent. By default, miSlider is designed to work with an ordered list as demonstrated above. If you want to use different elements be sure to change the 'selectorSlider' and 'selectorSlide' options as defined in the Configuration section below.
Reference jQuery - If jQuery is not present then add the following reference to the head of the HTML page
```
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
```

Reference the miSlider Plugin - Add the following references after the jQuery reference in the head of the HTML page


  <link href="styles/mislider.min.css" rel="stylesheet">
  <link href="styles/mislider-custom.css" rel="stylesheet">
  <script src="scripts/mislider.min.js"></script>
  <script>
      jQuery(function ($) {
          var slider = $('.mis-stage').miSlider();
      });
  </script>

Note: Make sure the jQuery selector ('.mis-stage') correctly selects the stage element defined in your HTML

You're good to go

Configuration

To change the default behaviour of the slider you can configure the slider by adding the following optional setting:


    <script>
        jQuery(function ($) {
            var slider = $('.mis-stage').miSlider({
                //  The speed of the slide transition  
                //  in milliseconds. Options: positive integer.
                speed: 700,
                //  slide pause time between transitions  
                //  in milliseconds. Options: false, positive integer. 
                //  false = Autoplay off.
                pause: 4000,
                //  The number of slides to increment with  
                //  Autoplay and Nav Buttons. 
                //  Options: positive or negative integer. 
                //  Positive integer = Slide left. 
                //  Negative integer = Slide right.
                increment: 1,
                //  The height of the stage in px. 
                //  Options: false or positive integer. 
                //  false = height is calculated using 
                //  maximum slide heights.
                stageHeight: false,
                //  Number of slides visible at one time. 
                //  Options: false or positive integer. 
                //  false = Fit as many as possible.
                slidesOnStage: 1,
                //  Continuous motion - Boolean. 
                //  true = slides loop in one direction if possible.
                slidesContinuous: true,
                //  The location of the current slide on the stage. 
                //  Options: 'left', 'right', 'center'.
                slidePosition: 'left',
                //  The slide to start on. 
                //  Options: 'beg', 'mid', 'end' 
                //  or slide number starting at 1 - '1','2', etc.
                slideStart: 'beg',
                //  The width of the current slide in px. 
                //  Options: false or positive integer. 
                //  false = width is the maximum of 
                //  the existing slide widths.
                slideWidth: false,
                //  The relative percentage scaling factor 
                //  of the current slide
                //  other slides are scaled down. 
                //  Options: positive number 100 or higher. 
                //  100 = No scaling.
                slideScaling: 100,
                //  The vertical offset of the slide center 
                //  as a percentage of slide height. 
                //  Options:  positive or negative number. 
                //  Neg value = up. Pos value = down. 
                //  0 = No offset.
                offsetV: 0,
                //  Center slide contents vertically
                //  Boolean.
                centerV: false,
                // Transition to clicked slide instead of visting URL
                // Boolean.
                slideClickable: true,
                //  Enable numbered list navigation
                //  Boolean.
                navList: true,
                //  Enable prev and next button navigation
                //  Boolean.
                navButtons: true,
                //  Always show prev and next button navigation 
                //  except when transitioning - Boolean.
                navButtonsShow: false,
                //  Opacity of the prev and next 
                //  button navigation when not transitioning. 
                //  Options: Number between 0 and 1. 
                //  0 (transparent) - 1 (opaque).
                navButtonsOpacity: 0.5,
                //  Randomize the order of the slides
                //  Boolean.
                randomize: false,
                //  The slides loaded call back function
                //  called when slides have loaded.
                slidesLoaded: false,
                //  The slide transition before 
                //  call back function - called before 
                //  the slide transition.
                beforeTrans: false,
                //  The slide transition complete 
                //  call back function - called at the end 
                //  of a slide transition.
                afterTrans: false,
                //  The CSS class that will be applied 
                //  to the stage element.
                classStage: 'mis-stage',
                //  The CSS class that will be 
                //  applied to the slider element.
                classSlider: 'mis-slider',
                //  The CSS class that will be 
                //  applied to each slide element.
                classSlide: 'mis-slide',
                //  The CSS class that will be 
                //  applied to the parent of the 
                //  prev and next button navigation elements.
                classNavButtons: 'mis-nav-buttons',
                //  The CSS class that will be 
                //  applied to the parent of the 
                //  numbered list navigation elements
                classNavList: 'mis-nav-list',
                //  The selector used to select 
                //  the slider element
                //  Descendant of the stage
                selectorSlider: 'ol',
                //  The selector used to select 
                //  each slide element
                //  Descendant of the slider
                selectorSlide: 'li'
            });
        });
    </script>

Styling

To style the slider, create a new stylesheet, name it 'mislider-custom.css' and save it to your CSS folder (Note: Add a reference to the stylesheet as illustrated above if you haven't already). Add your custom CSS to this file. By default miSlider uses the following class names:

'mis-stage' - The containing element that defines the visible area
'mis-slider' - The slide container element used to move the slides
'mis-slide' - Each slide element
'mis-container' - A container element inserted automatically by the plugin, wraped around the contents of each slide
'mis-nav-buttons' - The previous and next arrows on each side of the current image
'mis-nav-list' - the little dots used to navigate to different slides