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.7
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
Download miSlider zip or visit miSlider on GitHub
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.
The following are setting that can be customized:
Visit the miSlider website for demos - www.mislider.com
For issues with installation and configuration visit Stack Overflow.
Please report bugs and suggestions for features to GitHub issues.
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
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" type="text/css" />
<link href="styles/mislider-custom.css" rel="stylesheet" type="text/css" />
<script src="scripts/mislider.min.js" type="text/javascript"></script>
<script type="text/javascript">
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
To change the default behaviour of the slider you can configure the slider by adding the following optional setting:
<script type="text/javascript">
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,
// 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>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: