Documentation / mightySlider · Mighty Responsive Multipurpose Slider

mightySlider is a jQuery plugin for creating advanced one-directional slider with item based navigation support.

It can be used as a simple image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.

First make sure the HTML5 doctype is set as the very first line on the page:

<!DOCTYPE html>

Include jQuery 1.7 or above in the header. Going with the latest 1.10.x release is recommended for optimal performance, the Google CDN can be used to include this file.

Download mightySlider and upload the files from the package to your server. Include mightyslider.min.js below jQuery. Also include mightyslider.css and make sure the include paths point to the locations where the files have been uploaded.

<!-- Plugin requires jQuery 1.7+  -->
<!-- If you already have jQuery on your page, you shouldn't include it second time. -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Main slider JS script file -->
<script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script>

<!-- basic stylesheet with skins imported -->
<link rel="stylesheet" type="text/css" href="mightyslider/src/css/mightyslider.css"/>

That's it! mightySlider should now be ready for use.

Tip:

Gzipping helps reduce the total filesize to just 19kb.

Markup

Terminology:

mightySlider is being applied to a FRAME. SLIDEELEMENT is a first child of a FRAME. The slides are then inside of a SLIDEELEMENT.

HTML

You need a strict list of items, like:

<div class="mightySlider mightyslider_windows8_skin">   <!-- PARENT -->
  <div class="frame">   <!-- FRAME -->
    <ul class="slideelement">   <!-- SLIDEELEMENT -->
      <li></li>   <!-- SLIDE -->
      <li></li>   <!-- SLIDE -->
      <li></li>   <!-- SLIDE -->
    </ul>
  </div>
</div>

Every child element will be treated as a slide. Type of tag doesn't matter, it can be an unordered list, just list of divs, whatever. You can learn more about slide types in next sections of documentation.

Initialize the slider (usually at the end of the body tag. For slider settings, check options section.

The alternative is using the Javascript API. See the API documentation for more on it, this section will cover just the HTML approach.

<script>
  jQuery(document).ready(function($) {
    $(".frame").mightySlider({
      // options go here
      // as an example, enable keyboard arrows nav by 'slides'
      navigation: {
        keyboardNavBy: 'slides'
      }
    });  
  });
</script>

Apply size to slider parent via CSS (optional). If you want slider to scale height based on width, take a look at the autoScale option.

.mightySlider {
  width: 100%;
  height: 500px;
}

.mightySlider ul.slideelement {
  height: 100%;
  list-style: none;
}

.mightySlider ul.slideelement li {
  float: left;
  height: 100%;
}

And add data-mightyslider attribute to FRAME to set slider's original width and height:

<div class="mightySlider mightyslider_windows8_skin">   <!-- PARENT -->
  <div class="frame" data-mightyslider="width: 1170, height: 500">   <!-- FRAME -->
    <ul class="slideelement">   <!-- SLIDEELEMENT -->
      <li></li>   <!-- SLIDE -->
      <li></li>   <!-- SLIDE -->
      <li></li>   <!-- SLIDE -->
    </ul>
  </div>
</div>

Basically, to make it responsive (scale height based on width), all you need is to apply autoScale options.

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $(".frame").mightySlider({
      autoScale: 1,

      navigation: {
        keyboardNavBy: 'slides'
      }
    });  
  });
</script>

Media Types

mightySlider attempts to automatically detect the media type of the slides. The type can also be set to one of the following values using the type option in SLIDES Options: image, flash, video or iframe.

Image

Most of the time setting the type will not be required, it will be detected with cover option:

<li data-mightyslider="cover: 'IMAGE_PATH'"></li>   <!-- SLIDE -->

Auto Image Recognition

mightySlider has this feature to set covers from URL with all available options and automatically configure them for the slides. Here's an example of it:

<li data-mightyslider="
  cover: 'http://500px.com/photo/23718959'
"></li>   <!-- SLIDE -->

Sites covered:

flickr.com, 500px.com, instagram.com, vimeo.com, deviantart.com, youtube.com and dailymotion.com

Flash

Swf files can be embedded by using flash as the type. Some extra options are available for this type. flashvars can be used to set flashvars as key/value pairs. The following example embeds a video through flash using JWPlayer, it uses flashvars to configure the player:

<li data-mightyslider="
  type: 'flash',
  source: '/jwplayer/player.swf',
  cover: 'COVER_IMAGE_PATH',
  flashvars: {
    file: 'video.mp4',
    autostart: true
  }
"></li>   <!-- SLIDE -->

Video

Video files can be embedded by using video as the type. Most of the time setting the type will not be required, it will be detected with video, mp4, webm or ogv option:

<li data-mightyslider="
  type: 'video',
  video: 'VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

Allows extra options to be set when using HTML5 Video.

mp4:  'MP4__VIDEO_FILE_PATH',   // H.264/MPEG-4 AVC video file PATH.
webm: 'WEBM_VIDEO_FILE_PATH',   // VP8/WebM video file PATH.
ogv:  'OGG__VIDEO_FILE_PATH'    // Theora/OGG video file PATH.

<li data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  ogv:  'OGV__VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

Browser and Device support for video formats:

Format	IE 6-8	IE 9+	Safari	iOS	WP
H.264
VP8/WebM	-		-	-	-
Theora/OGG	-	-	-	-	-

Note 1:

IE9+ will play VP8/WebM natively, but only if the codec is installed.

Note 2:

Firefox will play H.264 from version 23 and for older versions of Firefox you need to use other formats like VP8/WebM also.

You can use your player as default player for video slides also by using videoFrame option to set video player PATH:

<li data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  ogv:  'OGV__VIDEO_FILE_PATH',
  videoFrame: 'src/videoframes/mediaelementjs.php',
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

Or by setting videoFrame global option in JavaScript to set video frame for all slides:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $(".frame").mightySlider({
      autoScale: 1,
      videoFrame: 'src/videoframes/jwplayer.php',

      navigation: {
        keyboardNavBy: 'slides'
      }
    });  
  });
</script>

Video Frames:

MediaElement.js mediaelementjs.php and JW Player jwplayer.php.

Embedding

The following examples are best practices for embedding third party content.

Youtube

Youtube provides HTML5 support by embedding videos through iframes. It's recommended to use this so that video will work on mobile devices without Flash support (iPhone/iPad). Here's an example of a Youtube <iframe> embed based on the Youtube Player API.

<li data-mightyslider="
  type:    'iframe',
  source: 'http://www.youtube.com/embed/nTFEUsudhfs?autoplay=1&autohide=1&border=0&wmode=opaque',
  cover:   'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

Vimeo

Vimeo also supports HTML5 through iframes. Here's an example of it, see the Vimeo documentation for all the available options.

<li data-mightyslider="
  type:    'iframe',
  source: 'http://player.vimeo.com/video/32071937?autoplay=1',
  cover:   'http://vimeo.com/32071937'
"></li>   <!-- SLIDE -->

Auto Video Recognition

mightySlider has this feature to parse videos from URL with all available options and automatically configure them for the slides, this feature available for covers too. Here's an example of it:

<li data-mightyslider="
  video: 'http://vimeo.com/32071937'
"></li>   <!-- SLIDE -->

Info:

In this example cover will be set automatically too.

Here's an example of it just for cover:

<li data-mightyslider="
  cover: 'http://vimeo.com/32071937'
"></li>   <!-- SLIDE -->

<li data-mightyslider="
  cover: 'http://www.flickr.com/photos/allforblue/2914536281/'
"></li>   <!-- SLIDE -->

Sites covered:

youtube.com, vimeo.com, metacafe.com, dailymotion.com, gametrailers.com, collegehumor.com, ustream.tv, twitvid.com, v.wordpress.com, google.com/videoplay and vzaar.com

FRAME Options

FRAME Options can be set using the data-mightyslider attribute:

<div class="mightySlider mightyslider_windows8_skin">   <!-- PARENT -->
  <div class="frame" data-mightyslider="width: 1170, height: 500">   <!-- FRAME -->
    <ul class="slideelement">   <!-- SLIDEELEMENT -->
      <li></li>   <!-- SLIDE -->
      <li></li>   <!-- SLIDE -->
      <li></li>   <!-- SLIDE -->
    </ul>
  </div>
</div>

width number

Sets the base slider width.

<div class="frame" data-mightyslider="width: 1170, height: 500">   <!-- FRAME -->

height number
Sets the base slider height.
```
<div class="frame" data-mightyslider="width: 1170, height: 500">   
```
Info:

mightySlider will autocalculate the ratio based on width and height values.

SLIDES Options

SLIDES Options can be set using the data-mightyslider attribute:

<li data-mightyslider="cover: 'IMAGE_PATH.JPG'"></li>   <!-- SLIDE -->

cover string

Sets the slide image cover.

<li data-mightyslider="cover: 'IMAGE_PATH.JPG'"></li>   <!-- SLIDE -->

<li data-mightyslider="cover: 'http://500px.com/photo/23718959'"></li>   <!-- SLIDE -->

Video Cover

Sets the slide video cover. Video covers is using HTML5 video so only supported in modern browsers.

<li data-mightyslider="cover: {
  webm: 'VIDEO_PATH.WEBM',
  mp4: 'VIDEO_PATH.MP4',
  poster: 'POSTER_PATH.JPG'
}"></li>   <!-- SLIDE -->

Note:

Video covers are not supported in touch devices so you need to set poster option also for inserting image cover slide instead of the video like above example.

Multiple Covers

Sets custom multiple covers using array and media queries.

<li data-mightyslider="cover: [ ['IMAGE_PATH.JPG', 'mediaQueryString'] ]"></li>   <!-- SLIDE -->

In this case when window width is 400px or lower MAX400PX_PATH.JPG image will show and when window width is 1200px or lower MAX1200PX_PATH.JPG image will show:

<li data-mightyslider="cover: [
  ['MAX400PX_PATH.JPG', '(max-width: 400px)'],
  ['MAX1200PX_PATH.JPG', '(max-width: 1200px)']
]"></li>   <!-- SLIDE -->

And here is the example for when device is portrait or landscape:

<li data-mightyslider="cover: [
  ['PORTRAIT_PATH.JPG', '(orientation: portrait)'],
  ['ORIGINAL_PATH.JPG']
]"></li>   <!-- SLIDE -->

Video covers with support for retina displays:

<li data-mightyslider="cover: [
  [{
    webm: 'VIDEO_PATH.WEBM',
    mp4: 'VIDEO_PATH.MP4',
    poster: 'POSTER_PATH.JPG'
  }],
  [{
    webm: 'VIDEO_PATH@2X.WEBM',
    mp4: 'VIDEO_PATH@2X.MP4',
    poster: 'POSTER_PATH@2X.JPG'
  }, '(-webkit-min-device-pixel-ratio: 1.5)']
]"></li>   <!-- SLIDE -->

viewport string

Sets the cover image resizing method used to fit content within the viewport. Possible values are: fill, fit, stretch and center, the default is fill.

Value	Description
fill	Scale the cover image to be as large as possible so that the SLIDE area is completely covered by the cover image. Some parts of the cover image may not be in view within the SLIDE positioning area.
fit	Scale the cover image to the largest size such that only its width or its height can fit inside the SLIDE content area.
stretch	Scale the cover image to the largest size such that both its width and its height can fit inside the SLIDE content area.
center	Allows the cover image be at its original size and in center.

<li data-mightyslider="cover: 'IMAGE_PATH.JPG', viewport: 'fit'"></li>

ID number string
Sets the SLIDE ID for deep linking, the default is auto generated SLIDE number.
```
<li data-mightyslider="cover: 'IMAGE_PATH.JPG', ID: 'SLIDE_ID'"></li>
```

video string

Sets the SLIDE video content.

<li data-mightyslider="
  video: 'MP4_VIDEO_FILE_PATH'
"></li>   <!-- SLIDE -->

<li data-mightyslider="
  video: 'http://vimeo.com/32071937'
"></li>   <!-- SLIDE -->

source string
Sets the SLIDE iframe content with URL.
```
<li data-mightyslider="
  source: 'PAGE_URL'
"></li>   
```
Note:

If you use cover option you need to set the type option to 'iframe'.

type string

Sets the SLIDE content type. Possible values are: image, flash, video or iframe.

<li data-mightyslider="
  type: 'iframe',
  source: 'PAGE_URL'
"></li>   <!-- SLIDE -->

thumbnail string
Sets a thumbnail image for use with the thumbnail controls. SLIDES have a thumbnail based on their cover source image by default, this option can be used to set an alternative. For every other type this option will have to be set to generate a thumbnail:
```
<li data-mightyslider="
  cover: 'http://500px.com/photo/23718959',
  thumbnail: 'THUMBNAIL_IMAGE_PATH'
"></li>   
```

icon string

It possible to set an icon type to overlay the SLIDE. Possible values are iframe, flash, video, link or any other string.

<li data-mightyslider="
  type:   'iframe',
  source: 'http://www.youtube.com/embed/nTFEUsudhfs?autoplay=1&autohide=1&border=0&wmode=opaque',
  icon:  'video',
  cover:  'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

size number string
Sets the SLIDE size. Can be: Fixed(500) or Percent('100%') number.
```
<li data-mightyslider="
  size: '100%'
"></li>   
```
Note:

This option will set the SLIDE width in horizontal navigation mode or height in vertical navigation mode.
pauseTime number
The time duration for moving to next slide in milliseconds
```
<li data-mightyslider="
  pauseTime: 2000
"></li>   
```

scrollParallax boolean

Makes the slide available for scroll parallax effect.

<li data-mightyslider="
  scrollParallax: true
"></li>   <!-- SLIDE -->

videoFrame string

The URL of the video frame to play SLIDE video with your custom player.

<li data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  videoFrame: 'src/videoframes/mediaelementjs.php',
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

Video Frames:

MediaElement.js mediaelementjs.php and JW Player jwplayer.php.

mp4 string

Sets the H.264/MP4 video file for play in SLIDE video content.

<li data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

webm string

Sets the VP8/WebM video file for play in SLIDE video content.

<li data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

ogv string

Sets the Theora/OGG video file for play in SLIDE video content.

<li data-mightyslider="
  mp4:  'MP4_VIDEO_FILE_PATH',
  ogv: 'OGV_VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

link object

Sets the SLIDE link.

<li data-mightyslider="
  link: {
    url: 'TYPE_THE_PAGE_URL_HERE'
  },
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

url string

Specifies the URL of the page the link goes to.

<li data-mightyslider="
  link: {
    url: 'TYPE_THE_PAGE_URL_HERE'
  },
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

target string

Specifies where to open the linked document. Possible values are: _blank, _self, _parent, _top and framename.

Value	Description
_blank	Opens the linked document in a new window or tab.
_self	Opens the linked document in the same frame as it was clicked (this is default).
_parent	Opens the linked document in the parent frame.
_top	Opens the linked document in the full body of the window.
framename	Opens the linked document in a named frame.

<li data-mightyslider="
  link: {
    url: 'TYPE_THE_PAGE_URL_HERE',
    target: '_blank'
  },
  cover: 'COVER_IMAGE_PATH'
"></li>   <!-- SLIDE -->

flashvars object

Sets flashvars on a flash movie using key/value pairs.

<li data-mightyslider="
  type: 'flash',
  source: '/jwplayer/player.swf',
  cover: 'COVER_IMAGE_PATH',
  flashvars: {
    file: 'video.mp4',
    autostart: true
  }
"></li>   <!-- SLIDE -->

Global Options

Global Options can be set using the Javascript API. All default options are stored in the mightySlider.defaults object. You can modify them simply by:

mightySlider.defaults.speed   = 300;
mightySlider.defaults.startAt = 2;

Or you can make it easier with jQuery.extend:

jQuery.extend(mightySlider.defaults, {
  speed:   300,
  startAt: 2
});

By default, everything is disabled. Initiating mightySlider with all default options will leave you with a dead FRAME that doesn't do anything.

Quick reference

mightySlider call with all default options as defined in the source.

var frame = new mightySlider('#frame', {
  // Mixed options
  moveBy:       300,        // Speed in pixels per second used by forward and backward buttons.
  speed:        300,        // Animations speed in milliseconds. 0 to disable animations.
  easing:       'swing',    // Easing for duration based (tweening) animations.
  startAt:      0,          // Starting offset in slides.
  startRandom:  0,          // Starting offset in slides randomly, where: 1 = random, 0 = disable.
  viewport:     'fill',     // Sets the cover image resizing method used to fit content within the viewport. Can be: 'center', 'fit', 'fill', 'stretch'.
  autoScale:    0,          // Automatically updates slider height based on base width.
  autoResize:   0,          // Auto resize the slider when active slide is bigger than slider FRAME.
  videoFrame:   null,       // The URL of the video frame to play videos with your custom player.
  preloadMode:  'nearby',   // Preloading mode for slides covers. Can be: 'all', 'nearby', 'instant'.

  // Navigation
  navigation: {
    horizontal:      1,               // Switch to horizontal mode.
    navigationType:  'forceCentered', // Slide navigation type. Can be: 'basic', 'centered', 'forceCentered'.
    slideSelector:   null,            // Select only slides that match this selector.
    smart:           1,               // Repositions the activated slide to help with further navigation.
    activateOn:      null,            // Activate an slide on this event. Can be: 'click', 'mouseenter', ...
    activateMiddle:  1,               // Always activate the slide in the middle of the FRAME. forceCentered only.
    slideSize:       0,               // Sets the slides size. Can be: Fixed(500) or Percent('100%') number.
    keyboardNavBy:   null             // Enable keyboard navigation by 'slides' or 'pages'.
  },

  // Deep-Linking
  deeplinking: {
    linkID:     null, // Sets the deeplinking id.
    separator:  '/',  // Separator between linkID and slide ID.
    scrollTo:   0     // Enable scroll to slider when link changed.
  },

  // Scrolling
  scrolling: {
    scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
    scrollBy:     0,    // Slides to move per one mouse scroll. 0 to disable scrolling.
    hijack:       300   // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
  },

  // Dragging
  dragging: {
    dragSource:    null, // Selector or DOM element for catching dragging events. Default is FRAME.
    mouseDragging: 1,    // Enable navigation by dragging the slideElement with mouse cursor.
    touchDragging: 1,    // Enable navigation by dragging the slideElement with touch events.
    releaseSwing:  1,    // Ease out on dragging swing release.
    swingSync:     7.5,  // Swing synchronization.
    swingSpeed:    0.1,  // Swing synchronization speed, where: 1 = instant, 0 = infinite.
    elasticBounds: 1,    // Stretch slideElement position limits when dragging past FRAME boundaries.
    syncSpeed:     0.5,  // slideElement synchronization speed, where: 1 = instant, 0 = infinite.
    onePage:       0,    // Enable one page move per drag, where: 1 = enable, 0 = disable.
    interactive:   null  // Selector for special interactive elements.
  },

  // Scrollbar
  scrollBar: {
    scrollBarSource: null, // Selector or DOM element for scrollbar container.
    dragHandle:      1,    // Whether the scrollbar handle should be draggable.
    dynamicHandle:   1,    // Scrollbar handle represents the ratio between hidden and visible content.
    minHandleSize:   50,   // Minimal height or width (depends on mightySlider direction) of a handle in pixels.
    clickBar:        1     // Enable navigation by clicking on scrollbar.
  },

  // Pages
  pages: {
    pagesBar:       null, // Selector or DOM element for pages bar container.
    activateOn:     null, // Event used to activate page. Can be: click, mouseenter, ...
    pageBuilder:          // Page item generator.
      function (index) {
        return '<li>' + (index + 1) + '</li>';
      }
  },

  // Thumbnails
  thumbnails: {
    thumbnailsBar:       null,    // Selector or DOM element for thumbnails bar container.
    horizontal:          1,       // Switch to horizontal mode.
    preloadThumbnails:   1,       // Enable preload thumbnails images.
    thumbnailNav:        'basic', // Thumbnail navigation type. Can be: 'basic', 'centered', 'forceCentered'.
    activateOn:          'click', // Event used to activate thumbnail. Can be: click, mouseenter, ...
    scrollBy:            1,       // Thumbnails to move per one mouse scroll. 0 to disable scrolling.
    mouseDragging:       1,       // Enable navigation by dragging the thumbnailsBar with mouse cursor.
    touchDragging:       1,       // Enable navigation by dragging the thumbnailsBar with touch events.
    thumbnailSize:       0,       // Set thumbnails size. Can be: 500 and '100%'.
    thumbnailBuilder:             // Thumbnail item generator.
      function (index, thumbnail) {
        return '<li><img src="' + thumbnail + '" /></li>';
      }
  },

  // Commands
  commands: {
    thumbnails:     0, // Enable thumbnails navigation.
    pages:          0, // Enable pages navigation.
    buttons:        0  // Enable navigation buttons.
  },

  // Navigation buttons
  buttons: {
    forward:    null, // Selector or DOM element for "forward movement" button.
    backward:   null, // Selector or DOM element for "backward movement" button.
    prev:       null, // Selector or DOM element for "previous slide" button.
    next:       null, // Selector or DOM element for "next slide" button.
    prevPage:   null, // Selector or DOM element for "previous page" button.
    nextPage:   null, // Selector or DOM element for "next page" button.
    fullScreen: null  // Selector or DOM element for "fullscreen page" button.
  },

  // Automated cycling
  cycling: {
    cycleBy:       null, // Enable automatic cycling by 'slides' or 'pages'.
    pauseTime:     5000, // Delay between cycles in milliseconds.
    loop:          1,    // Repeat cycling when last slide/page is activated.
    pauseOnHover:  0,    // Pause cycling when mouse hovers over the FRAME.
    startPaused:   0     // Whether to start in paused sate.
  },

  // Parallax layers
  parallax: {
    x:                1,              // Move in X axis parallax layers. where: 1 = enable, 0 = disable.
    y:                1,              // Move in Y axis parallax layers. where: 1 = enable, 0 = disable.
    z:                0,              // Move in Z axis parallax layers. where: 1 = enable, 0 = disable.
    scroll:           0,              // Eanbling the scrolling parallax for layers and covers.
    invertX:          1,              // Invert X axis movements. where: 1 = enable, 0 = disable.
    invertY:          1,              // Invert Y axis movements. where: 1 = enable, 0 = disable.
    invertZ:          0,              // Invert Z axis movements. where: 1 = enable, 0 = disable.
    revert:           1,              // Whether the layers should revert to theirs start position when mouse leaved the slider. where: 1 = enable, 0 = disable.
    revertDuration:   1500,           // The duration of the revert animation, in milliseconds.
    revertEasing:     'easeOutExpo',  // Easing for revert duration based (tweening) animations.
    frictionDuration: 1500,           // The duration of the friction the layers experience. 0 to disable friction.
    frictionEasing:   'easeOutExpo'   // Easing for friction duration based (tweening) animations.
  },

  // Classes
  classes: {
    isTouchClass:        'isTouch',        // Class for when device has touch ability.
    draggedClass:        'dragged',        // Class for dragged slideElement.
    activeClass:         'active',         // Class for active slides and pages.
    disabledClass:       'disabled',       // Class for disabled navigation elements.
    verticalClass:       'vertical',       // Class for vertical sliding mode.
    horizontalClass:     'horizontal',     // Class for horizontal sliding mode.
    showedLayersClass:   'showed',         // Class for showed layers.
    isInFullScreen:      'isInFullScreen'  // Class for when slider is in fullscreen
  }
});

moveBy number Default: 300
Speed in pixels per second used by forward and backward buttons.
```
moveBy: 200
```
speed number Default: 300
Animations speed in milliseconds. 0 to disable animations.
```
speed: 800
```
easing string Default: swing
Easing function for duration based (tweening) animations. Default build in functions are linear & swing. For more, install the jQuery Easing Plugin.
```
easing: 'easeOutExpo'
```
startAt number Default: 0
Starting offset in slides.
```
startAt: 2
```
startRandom boolean Default: false
Starting offset in slides randomly, where: 1 = random, 0 = disable.
```
startRandom: 1
```

viewport string Default: fill

Sets the cover image resizing method used to fit content within the viewport. Possible values are: fill, fit, stretch and center.

Value	Description
fill	Scale the cover image to be as large as possible so that the SLIDE area is completely covered by the cover image. Some parts of the cover image may not be in view within the SLIDE positioning area.
fit	Scale the cover image to the largest size such that only its width or its height can fit inside the SLIDE content area.
stretch	Scale the cover image to the largest size such that both its width and its height can fit inside the SLIDE content area.
center	Allows the cover image be at its original size and in center.

viewport: 'fit'

autoScale boolean Default: false
Automatically updates slider height based on base width.
```
autoScale: 1
```
autoResize boolean Default: false
Auto resize the slider when active slide is bigger than slider FRAME.
```
autoResize: 1
```
videoFrame string Default: null
The URL of the video frame to play videos with your custom player.
```
videoFrame: 'src/videoframes/mediaelementjs.php'
```
Video Frames:

MediaElement.js mediaelementjs.php and JW Player jwplayer.php.

preloadMode string Default: nearby

Preloading mode for slides covers. Possible values are: all, nearby and instant.

Value	Description
all	Preload all slides covers.
nearby	Preload visible and nearby slides covers.
instant	Preload just visible slides covers.

preloadMode: 'all'

navigation object

Sets the slider navigation options.

navigation: {
  horizontal:      1,               // Switch to horizontal mode.
  navigationType:  'forceCentered', // Slide navigation type. Can be: 'basic', 'centered', 'forceCentered'.
  slideSelector:   null,            // Select only slides that match this selector.
  smart:           1,               // Repositions the activated slide to help with further navigation.
  activateOn:      null,            // Activate an slide on this event. Can be: 'click', 'mouseenter', ...
  activateMiddle:  1,               // Always activate the slide in the middle of the FRAME. forceCentered only.
  slideSize:       0,               // Sets the slides size. Can be: Fixed(500) or Percent('100%') number.
  keyboardNavBy:   null             // Enable keyboard navigation by 'slides' or 'pages'.
}

horizontal boolean Default: true
Switches to horizontal mode.
```
navigation: {
  horizontal: 0
}
```

navigationType string Default: forceCentered

This option sets the SLIDE navigation type. Possible values are: basic, centered and forceCentered.

Value	Description
basic	Slides snap to FRAME edges.
centered	Activated slide, or slide that happens to be in the middle are positioned to the center of a visible FRAME when possible. "When possible" means that the first or last slides wont detach SLIDEELEMENT from the FRAME edges, thus they will remain at the start or end of the visible FRAME.
forceCentered	Same as centered, without the "when possible" part. All slides, even first and last ones can be positioned to the center of the FRAME when they are activated, or just moved there.

navigation: {
  navigationType: 'basic'
}

slideSelector string Default: null
Select only slides that match this selector. It only makes sense to use a selector that will select only visible slides. If you'll select only some slides, but leave others visible, the slide navigation won't work properly.
```
navigation: {
  slideSelector: '.even'
}
```
This example will select only slides that have even class.
smart boolean Default: true
Enables smart navigation. Smart navigation will re-position the activated item to help with further navigation. For example, in basic navigation type, when last visible item is activated, mightySlider will animate it to the start of the FRAME, as it assumes that user is moving forward.

In centered navigation types, all activated slides are positioned to the center of the frame.
```
navigation: {
  smart: 0
}
```
activateOn string Default: null
Event name. When an slide will receive this event, it will be activated. You'll mostly want to set it to click. Leave null to disable activating slides by user interaction.
```
navigation: {
  activateOn: 'click'
}
```
activateMiddle boolean Default: true
This will automatically activate a slide that happens to be in the middle of the visible FRAME. This option is available only for forceCentered navigation type.
```
navigation: {
  activateMiddle: 0
}
```
slideSize number string Default: 0
Sets the slides size. Can be: Fixed(500) or Percent('100%') number.
```
navigation: {
  slideSize: '80%'
}
```
```
navigation: {
  slideSize: 300   // 300px
}
```
Note:

This option will set the slides width in horizontal navigation mode or height in vertical navigation mode.

keyboardNavBy string Default: null

Enable keyboard navigation. Possible values are: slides and pages.

Value	Description
slides	Navigate by slides.
pages	Navigate by pages.

navigation: {
  keyboardNavBy: 'slides'
}

deeplinking object
Sets the slider deep linking options.
```
deeplinking: {
  linkID:     null, // Sets the deeplinking id.
  separator:  '/',  // Separator between linkID and slide ID.
  scrollTo:   0     // Enable scroll to slider when link changed.
}
```
- linkID string Default: null
  Slider linking name. Name that will be added to hash. For example if you set it to gallery, hash would look like this: #gallery/5.
```
deeplinking: {
  linkID: 'gallery'
}
```
- separator string Default: /
  Separator between linkID and slide ID. Separator that will be added to hash. For example if you set it to -, hash would look like this: #gallery-5.
```
deeplinking: {
  linkID: 'gallery',
  separator: '-'
}
```

scrolling object

Sets the slider mouse wheel scrolling options.

scrolling: {
  scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
  scrollBy:     0,    // Slides to move per one mouse scroll. 0 to disable scrolling.
  hijack:       300   // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
}

scrollSource string DOM element jQuery object Default: null
Element to be used as a listener for mouse wheel scroll events. By default, FRAME is used.

You can pass a selector string, a DOM element, or a jQuery object with element.
```
scrolling: {
  scrollSource: '#MouseWheelTrackerElement'
}
```
Or
```
scrolling: {
  scrollSource: document.getElementById('MouseWheelTrackerElement')
}
```
Or
```
scrolling: {
  scrollSource: jQuery('#MouseWheelTrackerElement')
}
```
scrollBy number Default: 0
Number of slides to move per one mouse wheel scroll event. Leave at 0 to disable.
```
scrolling: {
  scrollBy: 1
}
```
hijack number Default: 300
Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
```
scrolling: {
  hijack: 500
}
```

dragging object
Sets the slider mouse and touch dragging options.

Dragging can't be initiated by interactive elements. By default, mightySlider recognizes input, button, select, or a textarea elements as interactive. You can expand this pool by passing a selector into interactive option described below.
```
dragging: {
  dragSource:    null, // Selector or DOM element for catching dragging events. Default is FRAME.
  mouseDragging: 1,    // Enable navigation by dragging the slideElement with mouse cursor.
  touchDragging: 1,    // Enable navigation by dragging the slideElement with touch events.
  releaseSwing:  1,    // Ease out on dragging swing release.
  swingSync:     7.5,  // Swing synchronization.
  swingSpeed:    0.1,  // Swing synchronization speed, where: 1 = instant, 0 = infinite.
  elasticBounds: 1,    // Stretch slideElement position limits when dragging past FRAME boundaries.
  syncSpeed:     0.5,  // slideElement synchronization speed, where: 1 = instant, 0 = infinite.
  onePage:       0,    // Enable one page move per drag, where: 1 = enable, 0 = disable.
  interactive:   null  // Selector for special interactive elements.
}
```
- dragSource string DOM element jQuery object Default: null
  Element to be used as a listener for dragging initiation events (mousedown/touchstart). By default, FRAME is used.
  
  You can pass a selector string, a DOM element, or a jQuery object with element.
```
dragging: {
  dragSource: '#DraggingTrackerElement'
}
```
  Or
```
dragging: {
  dragSource: document.getElementById('DraggingTrackerElement')
}
```
  Or
```
dragging: {
  dragSource: jQuery('#DraggingTrackerElement')
}
```
- mouseDragging boolean Default: true
  Enables navigation by dragging the FRAME content with mouse cursor.
```
dragging: {
  mouseDragging: 0
}
```
- touchDragging boolean Default: true
  Enables navigation by dragging the FRAME content with touch events.
```
dragging: {
  touchDragging: 0
}
```
- releaseSwing boolean Default: true
  Whether mightySlider should calculate additional easing path for swipe/swing gestures after dragging has been released. The path length is calculated by the swing strength, i.e. the path that pointer moved in the last 40ms.
```
dragging: {
  releaseSwing: 0
}
```
- swingSync float Default: 7.5
  This specifies the release swing synchronization.
```
dragging: {
  swingSync: 2.5
}
```
- swingSpeed float Default: 0.1
  This specifies the release swing animation speed. For this animation mightySlider uses non-duration based easing function that accepts synchronization factor instead of milliseconds. That means:
  
  1 = Immediate, no animation 0 = Infinitely long animation
```
dragging: {
  swingSpeed: 0.15
}
```
- elasticBounds boolean Default: true
  Whether to stretch SLIDEELEMENT position limits when dragging past FRAME boundaries.
```
dragging: {
  elasticBounds: 0
}
```
- syncSpeed float Default: 0.5
  When dragging the handle, this represents the synchronization animation speed. For this animation mightySlider uses non-duration based easing function that accepts synchronization factor instead of milliseconds. That means:
  
  1 = Immediate, no animation 0 = Infinitely long animation
  
  By default, 0.5 means that the synchronization will take 2-3 animation frames, enough for it to feel super responsive and smooth without the choppiness. Set it lower for lazy synchronization feel.
```
dragging: {
  syncSpeed: 0.3
}
```
- onePage boolean Default: false
  Enable one page move per drag.
```
dragging: {
  onePage: 1
}
```
- interactive string Default: null
  Selector for elements that should be treated as interactive. Interactive elements don't initiate dragging. By default, mightySlider recognizes input, button, select, or a textarea elements as interactive. You can expand this pool by passing a selector into this option.
```
dragging: {
  interactive: 'span.interactive, input'
}
```

scrollBar object

Sets the slider scrollbar navigation control options.

scrollBar: {
  scrollBarSource: null, // Selector or DOM element for scrollbar container.
  dragHandle:      1,    // Whether the scrollbar handle should be draggable.
  dynamicHandle:   1,    // Scrollbar handle represents the ratio between hidden and visible content.
  minHandleSize:   50,   // Minimal height or width (depends on mightySlider direction) of a handle in pixels.
  clickBar:        1     // Enable navigation by clicking on scrollbar.
}

scrollBarSource string DOM element jQuery object Default: null

Pass the element that will be used as a container for scrollbar.

You can pass a selector string, a DOM element, or a jQuery object with element.

scrollBar: {
  scrollBarSource: 'div#ScrollBarContainerElement'
}

scrollBar: {
  scrollBarSource: document.getElementById('ScrollBarContainerElement')
}

scrollBar: {
  scrollBarSource: jQuery('div#ScrollBarContainerElement')
}

dragHandle boolean Default: true
Whether the scrollbar handle should be draggable.
```
scrollBar: {
  dragHandle: 0
}
```
dynamicHandle boolean Default: true
Scrollbar handle represents the ratio between hidden and visible content.
```
scrollBar: {
  dynamicHandle: 0
}
```
minHandleSize number Default: 50
Minimal height or width (depends on mightySlider direction) of a handle in pixels.
```
scrollBar: {
  minHandleSize: 30
}
```
clickBar boolean Default: true
Enable/disable navigation by clicking on scrollbar.
```
scrollBar: {
  clickBar: 0
}
```

pages object
Sets the slider pagesbar navigation control options.
```
pages: {
  pagesBar:       null, // Selector or DOM element for pages bar container.
  activateOn:     null, // Event used to activate page. Can be: click, mouseenter, ...
  pageBuilder:          // Page item generator.
    function (index) {
      return '<li>' + (index + 1) + '</li>';
    }
}
```
- pagesBar string DOM element jQuery object Default: null
  Pass the element that will be used as a container for page items/buttons.
  
  You can pass a selector string, a DOM element, or a jQuery object with element.
```
pages: {
  pagesBar: 'ul#PageItemsContainerElement'
}
```
  Or
```
pages: {
  pagesBar: document.getElementById('PageItemsContainerElement')
}
```
  Or
```
pages: {
  pagesBar: jQuery('ul#PageItemsContainerElement')
}
```
- activateOn string Default: null
  Event name. When a page item receives this event, the corresponding page will be activated. You'll mostly want to set it to click. Leave null to disable activating pages by user interaction.
```
pages: {
  activateOn: 'click'
}
```
- pageBuilder function Default: fn
  A function that returns an HTML for one page item. This function accepts page index (starting at 0) as its first argument, and receives the current mightySlider instance object as its this value. The default function looks like this:
```
pages: {
  pageBuilder: function (index) {
    return '<li>' + (index + 1) + '</li>';
  }
}
```

thumbnails object

Sets the slider thumbnails bar navigation control options.

thumbnails: {
  thumbnailsBar:       null,    // Selector or DOM element for thumbnails bar container.
  horizontal:          1,       // Switch to horizontal mode.
  preloadThumbnails:   1,       // Enable preload thumbnails images.
  thumbnailNav:        'basic', // Thumbnail navigation type. Can be: 'basic', 'centered', 'forceCentered'.
  activateOn:          'click', // Event used to activate thumbnail. Can be: click, mouseenter, ...
  scrollBy:            1,       // Thumbnails to move per one mouse scroll. 0 to disable scrolling.
  mouseDragging:       1,       // Enable navigation by dragging the thumbnailsBar with mouse cursor.
  touchDragging:       1,       // Enable navigation by dragging the thumbnailsBar with touch events.
  thumbnailSize:       0,       // Set thumbnails size. Can be: 500 and '100%'.
  thumbnailBuilder:             // Thumbnail item generator.
    function (index, thumbnail) {
      return '<li><img src="' + thumbnail + '" /></li>';
    }
}

thumbnailsBar string DOM element jQuery object Default: null

Pass the element that will be used as a container for thumbnails items.

You can pass a selector string, a DOM element, or a jQuery object with element.

thumbnails: {
  thumbnailsBar: 'ul#ThumbnailItemsContainerElement'
}

thumbnails: {
  thumbnailsBar: document.getElementById('ThumbnailItemsContainerElement')
}

thumbnails: {
  thumbnailsBar: jQuery('ul#ThumbnailItemsContainerElement')
}

horizontal boolean Default: true
Switches thumbnails sliding to horizontal mode.
```
thumbnails: {
  horizontal: 0
}
```
preloadThumbnails boolean Default: true
Enable preload thumbnails images. You should disable this option when you want to use thumbnails as tabs.
```
thumbnails: {
  preloadThumbnails: 0
}
```

thumbnailNav string Default: basic

This option sets the thumbnails navigation type. Possible values are: basic, centered and forceCentered.

Value	Description
basic	Thumbnail items snap to thumbnails bar edges.
centered	Activated thumbnail, or thumbnail that happens to be in the middle are positioned to the center of a visible thumbnails bar when possible. "When possible" means that the first or last thumbnails wont detach SLIDEELEMENT from the thumbnails bar edges, thus they will remain at the start or end of the visible thumbnails bar.
forceCentered	Same as centered, without the "when possible" part. All slides, even first and last ones can be positioned to the center of the thumbnails bar when they are activated, or just moved there.

thumbnails: {
  thumbnailNav: 'basic'
}

activateOn string Default: null
Event name. When a thumbnail item receives this event, the corresponding slide will be activated. You'll mostly want to set it to click. Leave null to disable activating thumbnails by user interaction.
```
thumbnails: {
  activateOn: 'click'
}
```
scrollBy number Default: 1
Number of thumbnail items to move per one mouse wheel scroll event. Leave at 0 to disable.
```
thumbnails: {
  scrollBy: 0
}
```
mouseDragging boolean Default: true
Enables navigation by dragging the thumbnails bar content with mouse cursor.
```
thumbnails: {
  mouseDragging: 0
}
```
touchDragging boolean Default: true
Enables navigation by dragging the thumbnails bar content with touch events.
```
thumbnails: {
  touchDragging: 0
}
```
thumbnailSize number string Default: 0
Sets the thumbnail items size. Can be: Fixed(500) or Percent('100%') number.
```
thumbnails: {
  thumbnailSize: '80%'
}
```
```
thumbnails: {
  thumbnailSize: 300   // 300px
}
```
Note:

This option will set the thumbnail items width in thumbnails bar horizontal navigation mode or height in vertical navigation mode.
thumbnailBuilder function Default: fn
A function that returns an HTML for one thumbnail item. This function accepts thumbnail index (starting at 0) as its first argument and thumbnail URL as its second argument, and receives the current mightySlider instance object as its this value. The default function looks like this:
```
thumbnails: {
  thumbnailBuilder: function (index, thumbnail) {
    return '<li><img src="' + thumbnail + '" /></li>';
  }
}
```

commands object
Enable the slider navigation controls.
```
commands: {
  thumbnails:     0, // Enable thumbnails navigation.
  pages:          0, // Enable pages navigation.
  buttons:        0  // Enable navigation buttons.
}
```
- thumbnails boolean Default: false
  Enable thumbnails navigation with its default options.
```
commands: {
  thumbnails: 1
}
```
- pages boolean Default: false
  Enable pages navigation with its default options.
```
commands: {
  pages: 1
}
```
- buttons boolean Default: false
  Enable arrows navigation buttons.
```
commands: {
  buttons: 1
}
```
buttons object
Sets the slider navigation buttons. All of the navigation button options are essentially just a convenience features, and could be easily replicated by methods.
```
buttons: {
  forward:    null, // Selector or DOM element for "forward movement" button.
  backward:   null, // Selector or DOM element for "backward movement" button.
  prev:       null, // Selector or DOM element for "previous slide" button.
  next:       null, // Selector or DOM element for "next slide" button.
  prevPage:   null, // Selector or DOM element for "previous page" button.
  nextPage:   null, // Selector or DOM element for "next page" button.
  fullScreen: null  // Selector or DOM element for "fullscreen page" button.
}
```
- forward string DOM element jQuery object Default: null
  Selector string, DOM element, or a jQuery object with element for forward button.
  
  Forward button initiates continuous movement forwards on mousedown, and stops the movement on mouseup.
```
buttons: {
  forward: '#ForwardButton'
}
```
  Or
```
buttons: {
  forward: document.getElementById('ForwardButton')
}
```
  Or
```
buttons: {
  forward: jQuery('#ForwardButton')
}
```
- backward string DOM element jQuery object Default: null
  Selector string, DOM element, or a jQuery object with element for backward button.
  
  Backward button initiates continuous movement backwards on mousedown, and stops the movement on mouseup.
```
buttons: {
  backward: '#BackwardButton'
}
```
- prev string DOM element jQuery object Default: null
  Selector string, DOM element, or a jQuery object with element for previous slide button.
```
buttons: {
  prev: '#PrevButton'
}
```
- next string DOM element jQuery object Default: null
  Selector string, DOM element, or a jQuery object with element for next slide button.
```
buttons: {
  next: '#NextButton'
}
```
- prevPage string DOM element jQuery object Default: null
  Selector string, DOM element, or a jQuery object with element for previous page button.
```
buttons: {
  prevPage: '#PrevPageButton'
}
```
- nextPage string DOM element jQuery object Default: null
  Selector string, DOM element, or a jQuery object with element for next page button.
```
buttons: {
  nextPage: '#NextPageButton'
}
```
- fullScreen string DOM element jQuery object Default: null
  Selector string, DOM element, or a jQuery object with element for fullscreen button.
```
buttons: {
  fullScreen: '#fullScreenButton'
}
```

cycling object

Sets the slider automated cycling.

cycling: {
  cycleBy:       null, // Enable automatic cycling by 'slides' or 'pages'.
  pauseTime:     5000, // Delay between cycles in milliseconds.
  loop:          1,    // Repeat cycling when last slide/page is activated.
  pauseOnHover:  0,    // Pause cycling when mouse hovers over the FRAME.
  startPaused:   0     // Whether to start in paused sate.
}

cycleBy string Default: null

Activates automated cycling. Possible values are: slides and pages.

Value	Description
slides	Cycling by slides.
pages	Cycling by pages.

cycling: {
  cycleBy: 'pages'
}

pauseTime number Default: 5000
Delay between cycles in milliseconds.
```
cycling: {
  pauseTime: 'pages'
}
```
loop boolean Default: true
Repeat cycling when last slide/page is activated.
```
cycling: {
  loop: 0
}
```
pauseOnHover boolean Default: false
Whether to pause the cycling while the mouse is hovering over the FRAME.
```
cycling: {
  pauseOnHover: 1
}
```
startPaused boolean Default: false
When cycleBy is enabled, this will start the mightySlider in paused mode.
```
cycling: {
  startPaused: 1
}
```

parallax object

Sets the slider parallax layers options.

parallax: {
  x:                1,              // Move in X axis parallax layers. where: 1 = enable, 0 = disable.
  y:                1,              // Move in Y axis parallax layers. where: 1 = enable, 0 = disable.
  z:                0,              // Move in Z axis parallax layers. where: 1 = enable, 0 = disable.
  scroll:           0,              // Eanbling the scrolling parallax for layers and covers.
  invertX:          1,              // Invert X axis movements. where: 1 = enable, 0 = disable.
  invertY:          1,              // Invert Y axis movements. where: 1 = enable, 0 = disable.
  invertZ:          1,              // Invert Z axis movements. where: 1 = enable, 0 = disable.
  revert:           1,              // Whether the layers should revert to theirs start position when mouse leaved the slider. where: 1 = enable, 0 = disable.
  revertDuration:   1500,           // The duration of the revert animation, in milliseconds.
  revertEasing:     'easeOutExpo',  // Easing for revert duration based (tweening) animations.
  frictionDuration: 1500,           // The duration of the friction the layers experience. 0 to disable friction.
  frictionEasing:   'easeOutExpo'   // Easing for friction duration based (tweening) animations.
}

x boolean Default: true
Enable/disable move in X axis parallax layers.
```
parallax: {
  x: 0
}
```
y boolean Default: true
Enable/disable move in Y axis parallax layers.
```
parallax: {
  y: 0
}
```
z boolean Default: false
Enable/disable move in Z axis parallax layers.
```
parallax: {
  z: 1
}
```
scroll boolean Default: false
Eanbling the scrolling parallax for layers and covers.
```
parallax: {
  scroll: 1
}
```
invertX boolean Default: true
Enable/disable invert X axis movements.
```
parallax: {
  invertX: 0
}
```
invertY boolean Default: true
Enable/disable invert Y axis movements.
```
parallax: {
  invertY: 0
}
```
invertZ boolean Default: false
Enable/disable invert Z axis movements.
```
parallax: {
  invertZ: 1
}
```
revert boolean Default: true
Whether the layers should revert to theirs start position when mouse leaved the slider.
```
parallax: {
  revert: 0
}
```
revertDuration number Default: 1500
The duration of the revert animation, in milliseconds.
```
parallax: {
  revertDuration: 500
}
```
revertEasing string Default: 'easeOutExpo'
Easing for revert duration based (tweening) animations.
```
parallax: {
  revertEasing: 'easeOutSine'
}
```
frictionDuration number Default: 1500
The duration of the friction the layers experience. 0 to disable friction.
```
parallax: {
  frictionDuration: 500
}
```
frictionEasing string Default: 'easeOutExpo'
Easing for friction duration based (tweening) animations.
```
parallax: {
  frictionEasing: 'easeOutSine'
}
```

classes object
Class names used on various elements to mark their state.
```
classes: {
  isTouchClass:        'isTouch',        // Class for when device has touch ability.
  draggedClass:        'dragged',        // Class for dragged slideElement.
  activeClass:         'active',         // Class for active slides and pages.
  disabledClass:       'disabled',       // Class for disabled navigation elements.
  verticalClass:       'vertical',       // Class for vertical sliding mode.
  horizontalClass:     'horizontal',     // Class for horizontal sliding mode.
  showedLayersClass:   'showed',         // Class for showed layers.
  isInFullScreen:      'isInFullScreen'  // Class for when slider is in fullscreen.
}
```
- isTouchClass string Default: isTouch
  Class added to PARENT when device has touch ability.
```
classes: {
  isTouchClass: 'isTouch'
}
```
- draggedClass string Default: dragged
  
  Class added to SLIDEELEMENT when being dragged.
- activeClass string Default: active
  
  Class added to the active slide, thumbnail or page..
- disabledClass string Default: disabled
  
  Class added to buttons when they are disabled.
  
  Buttons are being disabled when there would be no action after pressing them. For example: the previous item button when the very first item is activated.
  
  If a button is a <button> or <input> element, it will also be marked with disabled="disabled" attribute.
- verticalClass string Default: vertical
  
  Class added to PARENT in vertical navigation mode.
- horizontalClass string Default: horizontal
  
  Class added to PARENT in horizontal navigation mode.
- showedLayersClass string Default: showed
  
  Class added to showed layers.
- isInFullScreen string Default: isInFullScreen
  
  Class added to PARENT when the slider has been entered to fullscreen.

The alternative to using the HTML based approach is using the Javascript API. The API has all the options of the HTML approach and provides some useful extra functions that help with customization and interaction.

Calling new mightySlider class

When you want to have a direct access to all methods and complete control over mightySlider:

var slider = new mightySlider( frame, options [, callbackMap ] );

New instance has to be than initiated. That is to give you time to bind callbacks before anything happens. For example, if you want to register callbacks, but don't want to use callbackMap.

slider.init();

The init method returns the very same instance it is called on, so if you are binding callbacks via a callbackMap argument, or not binding callbacks at all, you can initiate the instance right after the new mightySlider call. The slider variable will be the same.

var slider = new mightySlider(frame, options, callbackMap).init();

Now you can use all methods directly on this instance.

slider.activate(1); // Activates 2nd element
slider.reload();    // Reload mightySlider

Arguments:

frame string DOM element jQuery object

Argument can be a selector, DOM element, or jQuery object containing an element.

var slider = new mightySlider('#frame');                            // selector

var slider = new mightySlider(document.getElementById('frame'));    // DOM element

var slider = new mightySlider(jQuery('#frame'));                    // jQuery object

options object

Object with mightySlider options. All options are documented in the Global Options.
[ callbackMap ] object
Map with callbacks that should be registered to mightySlider events before mightySlider gets initiated.
```
var slider = new mightySlider(frame, options, {
  load: function (eventName) {},
  move: [
    function (eventName) {},
    function (eventName) {}
  ]
});
```
This will bind one function to load event, and two functions to move event.

To see all available mightySlider events, head over to Events documentation.

Calling via jQuery proxy

jQuery( '#frame' ).mightySlider( [ options [, callbackMap ] ] );

Arguments:

[ options ] object

Object with mightySlider options. All options are documented in the Global Options.
[ callbackMap ] object
Map with callbacks that should be registered to mightySlider events before mightySlider gets initiated.
```
$( '#frame' ).mightySlider(options, {
  load: function (eventName) {},
  move: [
    function (eventName) {},
    function (eventName) {}
  ]
});
```
This will bind one function to load event, and two functions to move event.

To see all available mightySlider events, head over to Events documentation.

When calling the mightySlider class, the resulting new object exposes some useful properties. These properties are read only, and shouldn't be modified.

Assuming:

var slider = new mightySlider(frame, options).init();

slider.initialized boolean

Flag of mightySlider initialized state. true when .init() has been called, false otherwise.
slider.options object

Object with all options used by the current mightySlider object. This is essentially a mightySlider.defaults object extended by options passed to new mightySlider().
slider.frame Node

FRAME element DOM node.
slider.slideElement Node

SLIDEELEMENT element DOM node.
slider.position object
mightySlider position object specifying the SLIDEELEMENT positions and boundaries:
```
{
  "start":       0,     // SLIDEELEMENT start of the frame position.
  "center":      1021,  // SLIDEELEMENT center of the frame position.
  "end":         2042,  // SLIDEELEMENT end of the frame position.
  "current":     1168,  // Current SLIDEELEMENT position.
  "destination": 1168   // When in animation, this is the SLIDEELEMENT destination position.
}
```
All positions are flipped from negative to positive numbers, so it would be easier to work with them.

For example: SLIDEELEMENT element, when at the end of the frame, has CSS property left equal to -2042px (or translateX(-2042px) in browsers that support it), but in the position object, this is represented by positive number end: 2042. All mightySlider methods than accept the flipped position state, like .slideTo(200) to slide 200 pixels from the start of the FRAME, .slideBy(100) to slide by 100px forwards, .slideBy(-100) to slide by 100px backwards, .moveBy(300) to move 300px per second forwards, .moveBy(-300) to move 300px per second backwards, ...

slider.handlePosition object

mightySlider handlePosition object specifying the scrollbar handle positions:

{
  "start":       0,     // Handle start of the scrollbar position.
  "center":      225,   // Handle center of the scrollbar position.
  "end":         250,   // Handle end of the scrollbar position.
  "current":     200    // Current scrollbar handle position.
}

slider.relative object

mightySlider relatives object:

{
  "firstSlide":       4,    // First at least half visible slide in the FRAME.
  "centerSlide":      6,    // Slide in the middle of the visible FRAME.
  "lastSlide":        7,    // Last at least half visible slide in the FRAME.
  "activeSlide":      0,    // Current active slide.
  "activePage":       1,    // Current active page.
  "slideElementSize": 3212, // SLIDEELEMENT size.
  "frameSize":        1170, // FRAME size.
  "scrollbarSize":    1170, // Scrolbar size.
  "handleSize":       531   // Scrollbar handle size.
}

All relatives are updated on every position change, so they are always current. The relatives are always determined from destination position (position.destination), and never from current position (position.current).

The slide properties in non-slide based navigation (firstSlide, ...) are 0 & irrelevant.

slider.slides array

Array of slide objects. Structure:

[
  {
    "element":  DOMNode,     // Slide element DOM node.
    "ID":       151,         // Slide ID for deep linking.
    "start":    0,           // Slide start of the FRAME position.
    "center":   -439,        // Slide center of the FRAME position.
    "end":      -878,        // Slide end of the FRAME position.
    "size":     151,         // Slide size in a correspond mightySlider direction.
    "half":     146,         // The half of the slide size.
    "type":     String,      // Slide content type.
    "options":  Object,      // Options that added to slide via data-mightyslider attribute.
    "layers": [            // Array of slide layers objects.
      {
        "element":   DOMNode, // Layer element DOM node.
        "type":      String,  // Layer content type.
        "options":   Object,  // Options that added to layer via data-mightyslider attribute.
        "animation": Object   // Layer animation frames.
      },
      ...
    ],
    "isParallax":              Boolean,  // If any layers has parallax options
    "hasLayerMediaEnabled":  Boolean   // If any layers has media options
  },
  ...
]

Following the position object flipping rule, the negative sign is flipped for each position property. The slide object properties are than designed to be used like this:

slider.slideTo(slider.slides[6].center); // Animates 7th slide to the center of the FRAME

But this is mostly for mightySlider internals, and is quite redundant as the same can be accomplished by:

slider.toCenter(6);

By examining the item object in the example, you can see that center and end properties are out of bounds, as they are smaller than slider.position.start, so mightySlider will never animate SLIDEELEMENT to such position (unless you are dragging the content past boundaries and elasticBounds are enabled). If mightySlider would be created with forceCentered navigation type, the slider.position.start would be than equal to -439, which is the center position of the first object, i.e. slider.slides[0].center.

slider.pages array
Array with page start positions:
```
[
  0,    // First page start position.
  1168, // Second page start position.
  2336  // Third page start position.
]
```
The slider.activatePage(1) is then essentially just a shorthand for slider.slideTo(slider.pages[1]).

slider.thumbnails array

Array with page start positions:

[
  "FIRST_THUMBNAIL_IMAGE",   // First slide thumbnail.
  "SECOND_THUMBNAIL_IMAGE",  // Second slide thumbnail.
  "THIRD_THUMBNAIL_IMAGE"    // Third slide thumbnail.
]

slider.isFullScreen boolean

When slider is in fulscreen, this property will be true otherwise is false.
slider.isPaused number
Pause priority level. When cycling is paused, this value is higher than 0, so it is safe to use it as a truthy value in conditionals:
```
if (slider.isPaused) {
  ...
}
```
slider.isFreezed boolean
When slider is freezed, this property will be true otherwise is false.
```
if (slider.isFreezed) {
  ...
}
```
slider.progressElapsed number
Automated cycling progress time elapsed.
```
if (slider.progressElapsed >= 1500) {
  ...
}
```
slider.uniqId string

Unique ID for every mightySlider instances.

mightySlider has a bunch of very useful methods that provide almost any functionality required. You can call them directly on a mightySlider object, or (if you're a lame) via a jQuery.fn.mightySlider proxy, like so:

$('#frame').mightySlider('method' [, arguments... ] );

The docs & examples below assume that:

var slider = new mightySlider(frame, options).init();

init
Initiates mightySlider instance, i.e. sets the required styles, binds event handlers,...
```
slider.init();
```
This method returns the very same object it was called on, so you can chain it right after the instance creation:
```
var slider = new mightySlider(frame, options, callbackMap).init();
```
The purpose of this is to give you time to register callbacks with on and off methods without using callbackMap argument before anything happens.
destroy
Removes classes, resets positions, and unbinds all event listeners.
```
slider.destroy();
```
When called via jQuery.fn.mightySlider proxy, you can also use an alias:
```
$('#frame').mightySlider('destroy'); // does the same thing
```
Returns the mightySlider object, so you can do shenanigans like new mightySlider().init().destroy().init().
reload
Recalculates sizes and positions of elements. Call it if any change has happened to FRAME or its content, like things have been appended, removed, or resized.
```
slider.reload();
```

slideTo

Animate SLIDEELEMENT to a specific position - offset from the start of a FRAME in pixels. The final position will be adjusted to snap slides to the edge/center of the visible FRAME.

slider.slideTo( position [, immediate ] );

Arguments:

Argument	Description
position	`number` New SLIDEELEMENT position. It will be adjusted to fit within `position.start` and `position.end`.
immediate	`boolean` When `true`, re-positioning will occur immediately without animation.

slideBy

Animate SLIDEELEMENT by an amount of slides. The final position will be adjusted to snap slides to edge/center of the visible FRAME.

slider.slideBy( delta [, immediate ] );

Arguments:

Argument	Description
delta	`number` Number of slides to slide the SLIDEELEMENT by. Negative animates towards the beginning, positive towards the end. The final position will be adjusted to fit within `position.start` and `position.end`.
immediate	`boolean` When `true`, re-positioning will occur immediately without animation.

toStart

Positions target to the start of a visible FRAME. When no target is passed, the whole SLIDEELEMENT will be used.

slider.toStart( [ target ] [, immediate ] );

Doesn't work in centered or forceCentered navigation type.

Arguments:

Argument	Description
target	`mixed` It can be an slide index, or an slide DOM element.
immediate	`boolean` When `true`, re-positioning will occur immediately without animation.

Examples:

// Universal
slider.toStart(); // Position the whole SLIDEELEMENT to the start
slider.toStart(true); // Position whole SLIDEELEMENT to the start, immediately

// Slide based navigation
slider.toStart(2); // Position 3rd slide in SLIDEELEMENT to the start of a visible FRAME
slider.toStart($slides.eq(1), true); // Position 2nd slide in SLIDEELEMENT to the start, immediately

toCenter

Positions target to the center of a visible FRAME. When no target is passed, the whole SLIDEELEMENT will be used.

slider.toCenter( [ target ] [, immediate ] );

Arguments:

Argument	Description
target	`mixed` It can be an slide index, or an slide DOM element.
immediate	`boolean` When `true`, re-positioning will occur immediately without animation.

Examples from toStart apply here as well.

toEnd

Positions target to the end of a visible FRAME. When no target is passed, the whole SLIDEELEMENT will be used.

slider.toEnd( [ target ] [, immediate ] );

Doesn't work in centered or forceCentered navigation type.

Arguments:

Argument	Description
target	`mixed` It can be an slide index, or an slide DOM element.
immediate	`boolean` When `true`, re-positioning will occur immediately without animation.

Examples from toStart apply here as well.

moveBy

Initiates continuous linear movement in the direction and speed specified by speed argument. The movement will continue until the position reaches a limit, or stop method is called.

slider.moveBy( speed );

Arguments:

Argument	Description
speed	`number` Movement speed in pixels per second. Negative number means backward movement.

Examples:

slider.moveBy(300);  // Move forwards with speed of 300px per second
slider.moveby(-200); // Move backwards with speed of 200px per second

stop
Stops the continuous movement initiated my moveBy method.
```
slider.stop();
```

activate

Activates an slide, and when smart is enabled, repositions it to help with further navigation.

slider.activate( slide [, immediate ] );

Arguments:

Argument	Description
slide	`mixed` Index or DOM element of an slide in SLIDEELEMENT that should be activated. Slides index starts at `0`.
immediate	`boolean` When `true`, re-positioning will occur immediately without animation.

prev
Activates previous slide.
```
slider.prev();
```
next
Activates next slide.
```
slider.next();
```

activatePage

Activate a page.

slider.activatePage( index [, immediate ] );

Arguments:

Argument	Description
index	`number` Index of a page that should be activated, starting at `0`.
immediate	`boolean` When `true`, re-positioning will occur immediately without animation.

prevPage
Activates previous page. When forceCentered navigation is used, this is a mere alias of prev method.
```
slider.prevPage();
```
nextPage
Activates next page. When forceCentered navigation is used, this is a mere alias of next method.
```
slider.nextPage();
```

pause

Pauses automated cycling.

slider.pause( [ priority ] );

The priority level is used internally for pauseOnHover functionality. You can mostly ignore it.

Arguments:

Argument	Description
priority	`number` Pause priority level. Default is `100`.

resume

Resumes automated cycling.

slider.resume( [ priority ] );

Will resume only a pause with equal or lower priority level.

The priority level is used internally for pauseOnHover functionality. You can mostly ignore it.

Arguments:

Argument	Description
priority	`number` Resume priority level. Default is `100`.

toggleCycling
Starts when paused, or pauses when cycling.
```
slider.toggleCycling();
```
enterFullScreen
Make the slider fullscreen.
```
slider.enterFullScreen();
```
exitFullScreen
Make the slider coming out from fullscreen.
```
slider.exitFullScreen();
```
toggleFullScreen
Enter or exit fullscreen, depending on the slider is in fullscreen or not.
```
slider.toggleFullScreen();
```
set
Updates one, or multiple values in an options object.
```
slider.set( name [, value ] );
```
```
slider.set('speed', 0); // Updates one property in options object
slider.set({
  speed: 0,
  cycling: {
    pauseTime: 0
  }
}); // Extends current options object
```
Not all options can be updated.

You can however update any option, and than do slider.destroy().init() to re-initiate mightySlider object, thus rebinding all event listeners, rebuilding pages, ...

add

Adds one or multiple slides to the SLIDEELEMENT end, or a specified position, and than reloads the mightySlider object.

slider.add( element [, position ] );

Arguments:

Argument	Description
element	`mixed` DOM element, DOM node list, array with DOM elements, or HTML string of new slide(s).
position	`number` The relevant position where the new slide should be placed.

When inserting new slides, you want to use this method as it also handles the active slide index. For example: when slider.relative.activeSlide: 8, and inserting new slide at position 6, the slide 6 will be pushed to position 7, and slider.relative.activeSlide will shift to 9.

Examples:

slider.add(document.createElement('li'), 5); // Insert slide at position 5
slider.add([LIElement, LIElement]); // Insert multiple slides at the end of SLIDEELEMENT
slider.add('<li data-mightyslider="cover: \'COVER_IMAGE_PATH.JPG\'"></li>', 0); // Insert new slide at the beginning of SLIDEELEMENT

remove

Removes one element from SLIDEELEMENT, and reloads the mightySlider object.

slider.remove( element );

Arguments:

Argument	Description
element	`mixed` It can be slide index, DOM element, or selector.

moveAfter

Method for re-arranging slides. Moves an slide after the position index.

slider.moveAfter( slide, position );

Arguments:

Argument	Description
slide	`mixed` Slide to be positioned. Can be DOM element, or relative slide index.
position	`mixed` Anchor slide. Can be DOM element, or relative slide index.

Relative index means, that you can pass negative index to select slides from the end of slides list. For example: passing -1 selects the last slide.

Examples:

slider.moveAfter(0, -1); // Moves first slide after the last slide
slider.moveAfter(-2, 5); // Moves the second to last slide after the 6th slide

moveBefore

Method for re-arranging slides. Moves an slide before the position index.

slider.moveBefore( slide, position );

Arguments:

Argument	Description
slide	`mixed` Slide to be positioned. Can be DOM element, or relative slide index.
position	`mixed` Anchor slide. Can be DOM element, or relative slide index.

Relative index means, that you can pass negative index to select slides from the end of slides list. For example: passing -1 selects the last slide.

Examples:

slider.moveBefore(-1, 0); // Moves the last slide before the first one
slider.moveBefore(-2, 5); // Moves the second to last slide before the 6th slide

on

Registers a callback to one or more of the mightySlider events. All available events and arguments they receive can be found in the Events documentation.

slider.on( eventName, callback );

Arguments:

Argument	Description
eventName	`mixed` Name of the event, or callback map object.
callback	`mixed` Callback function, or an array with callback functions.

Examples:

// Basic usage
slider.on('load', function (eventName) {});

// Multiple events, one callback
slider.on('load move', function (eventName) {});

// Multiple callbacks for multiple events
slider.on('load move', [
  function (eventName) {},
  function (eventName) {}
]);

// Callback map object
slider.on({
  load: function (eventName) {},
  move: [
    function (eventName) {},
    function (eventName) {}
  ]
});

one

Same as on method, but registered callbacks will be executed only once, and will be unbind afterwards.

slider.one( eventName, callback );

Arguments:

Argument	Description
eventName	`mixed` Name of the event, or callback map object.
callback	`mixed` Callback function, or an array with callback functions.

off

Removes one, multiple, or all callbacks from one of the mightySlider events.

slider.off( eventName [, callback ] );

Arguments:

Argument	Description
eventName	`mixed` Name of the event.
callback	`mixed` Callback function, or an array with callback functions to be removed. Omit to remove all callbacks.

Examples:

// Removes one callback from load event
slider.off('load', fn1);

// Removes one callback from multiple events
slider.off('load move', fn1);

// Removes multiple callbacks from multiple event
slider.off('load move', [ fn1, fn2 ]);

// Removes all callbacks from load event
slider.off('load');

getSlide

Returns the object of a requested slide.

slider.getSlide( slide );

Arguments:

Argument	Description
slide	`mixed` Can be a slide index, or a slide DOM element.

The slide object looks like this:

{
    "element":  DOMNode,  // Slide element DOM node.
    "ID":       151,      // Slide ID for deep linking.
    "start":    0,        // Start position inside of the FRAME.
    "center":   -439,     // Center position inside of the FRAME.
    "end":      -878,     // End position inside of the FRAME.
    "size":     151,      // Size in the current mightySlider direction.
    "half":     146,      // The half of the slide size.
    "type":     "video",  // Slide content type.
    "options":  Object,   // Options that added to slide via data-mightyslider attribute.
    "layers": [         // Array of slide layers objects.
      {
        "element":   DOMNode, // Layer element DOM node.
        "options":   Object,  // Options that added to layer via data-mightyslider attribute.
        "animation": Object   // Layer animation frames.
      },
      ...
    ]
  }

When slide hasn't been found, returns false.

getIndex

Returns an index of a slide, or -1 when not found.

slider.getIndex( slide );

Arguments:

Argument	Description
slide	`mixed` Can be a slide index, or a slide DOM element.

When you pass an integer to the slide argument, the function will just check whether it is a valid index (fits between 0 and slider.slides.length - 1), and return the very same number, or -1 when invalid.

freeze
Freeze the automated cycling and slider layers animations.
```
slider.freeze();
```
unFreeze
Unfreeze & normalize the automated cycling and slider layers animations.
```
slider.unFreeze();
```

You can register callbacks to mightySlider events in multiple ways.

Passing in a callbackMap on mightySlider object creation:

var slider = new mightySlider('#frame', options, {
  load: fn,
  move: [fn1, fn2] // Multiple callbacks
}).init();

With on, one and off methods:

var slider = new mightySlider('#frame', options);

// Register a callback to multiple events
slider.on('load move', function (eventName) {
  // ...
});

// Register a callback that will be executed only once
slider.one('load', function (eventName) {
  // ...
});

// Initiate mightySlider instance
slider.init();

Events via jQuery.fn.mightySlider:

$('#frame').mightySlider('on', 'load move', function(eventName){
  // ...
});

More usage examples can be found in the on, one, and off methods documentation.

Common arguments:

this

The this value in all callbacks is the mightySlider object triggering the event. With it you have access to all mightySlider object properties.

First argument

All callbacks receive the event name as the first argument.

slider.on('load', function (eventName) {
  console.log(eventName); // 'load'
  console.log(this.position);  // mightySlider position object
});

Events list:

initialize

Event triggered when slider has been initiated.

Arguments:

Argument Description

eventName string Event name.
load
Event triggered on first mightySlider load, and on each reload method call.

Arguments:

Argument Description

eventName string Event name.

Note:

The slider.position or this.position object in this event also contains an old property, containing the position object as it was before the reload. The position object than looks like this:
```
{
  current: 200,
  destination: 200,
  end: 220,
  start: 0,
  old: {
    current: 200,
    destination: 200,
    end: 200,
    start: 0
  }
}
```

active

Event triggered when new slide has been activated.

Arguments:

Argument	Description
eventName	`string` Event name.
slideIndex	`number` Index of activated slide.

activePage

Event triggered when new page has been activated, or mightySlider arrived at it while scrolling.

Arguments:

Argument	Description
eventName	`string` Event name.
pageIndex	`number` Index of activated page.

change

Event triggered whenever a new position change has been requested. That means that when you call slideTo it will trigger one change event right before the animation starts.

Arguments:

Argument Description

eventName string Event name.

Note:

When dragging SLIDEELEMENT, this event is being triggered on each mouse move, which is quite often.
move

Event triggered on every frame of the animation. Animations are chained to requestAnimationFrame, so the frequency of this event when mightySlider is in animation is 60 FPS.

Arguments:

Argument Description

eventName string Event name.
moveStart

Event triggered on start of every animation or dragging.

Arguments:

Argument Description

eventName string Event name.
moveEnd

Event triggered on end of every animation or dragging.

Arguments:

Argument Description

eventName string Event name.
pause

Triggered when cycling has been paused. That includes pauseOnHover functionality.

Arguments:

Argument Description

eventName string Event name.
resume

Triggered when cycling has been resumed.

Arguments:

Argument Description

eventName string Event name.

progress

Triggered on each cycle tick.

Arguments:

Argument	Description
eventName	`string` Event name.
progressNumber	`float` Number of cycling time progresses. Min: 0, Max: 1

enterFullScreen

Triggered when slider has been entered to fullscreen.

Arguments:

Argument Description

eventName string Event name.
exitFullScreen

Triggered when slider has been exited from fullscreen.

Arguments:

Argument Description

eventName string Event name.
resize

Event triggered when the slider has been resized.

Arguments:

Argument Description

eventName string Event name.
beforeResize

Event triggered before the slider resize.

Arguments:

Argument Description

eventName string Event name.

coverLoaded

Event triggered whenever a new cover image/video has been loaded.

Arguments:

Argument	Description
eventName	`string` Event name.
slideIndex	`number` Index of cover loaded slide.

beforeCoverLoad

Event triggered before a new cover image/video load.

Arguments:

Argument	Description
eventName	`string` Event name.
slideIndex	`number` Index of cover loaded slide.

coverInserted

Event triggered whenever a new cover image/video has been inserted.

Arguments:

Argument	Description
eventName	`string` Event name.
coverElement	`DOM element` Inserted cover element.

slideLoad

Event triggered when a slide has been loaded.

Arguments:

Argument	Description
eventName	`string` Event name.
slideIndex	`number` Index of loaded slide.

beforeSlideLoad

Event triggered before a slide load.

Arguments:

Argument	Description
eventName	`string` Event name.
slideIndex	`number` Index of loaded slide.

mediaGenerated

Event triggered whenever a slide media content has been generated.

Arguments:

Argument	Description
eventName	`string` Event name.
generatedElement	`DOM element` Generated media element.

beforeGenerateMedia

Event triggered before a slide media content generate.

Arguments:

Argument Description

eventName string Event name.
destroy

Event triggered when slider has been destroyed.

Arguments:

Argument Description

eventName string Event name.

Layers are the static or animated elements that will be appear on activated slides.

HTML

Adding layers with mightySlider is logical and easy! All elements inside slide that have class .mSCaption will be treated by slider as layers (tag name doesn't matter). Layers can not be nested, but you can put multiple instances of them into one slide.

<div class="mightySlider mightyslider_windows8_skin">   <!-- PARENT -->
  <div class="frame" data-mightyslider="width: 1170, height: 500">   <!-- FRAME -->
    <ul class="slideelement">   <!-- SLIDEELEMENT -->

      <!-- Two layers in one slide -->
      <li>
        <h2 class="mSCaption">Layer content 1</h2>   <!-- LAYER -->
        <div class="mSCaption">Layer <b>content</b> 2</div>   <!-- LAYER -->
      </li>   <!-- SLIDE -->

      <!-- HTML content + Image as layer -->
      <li>
        HTML content...
        <img class="mSCaption" src="layer-image.jpg" />   <!-- LAYER -->
      </li>   <!-- SLIDE -->

      <!-- Cover image + Layer with HTML title and text -->
      <li data-mightyslider="cover: 'http://500px.com/photo/23718959'">
        <div class="mSCaption">
            <h2>Title</h2>
            <p>Layer text with title and text.</p>
        </div>   <!-- LAYER -->
      </li>   <!-- SLIDE -->
    </ul>
  </div>
</div>

By default layers have position: absolute; and can be positioned with left, right, top or bottom CSS properties.

Options

Layer Options can be set using the data-mightyslider attribute:

<div class="mSCaption" data-mightyslider="loop: true"></div>   <!-- LAYER -->

Quick reference

<div class="mSCaption" data-mightyslider="
  cover: 'IMAGE_PATH.JPG',
  video: 'MP4_VIDEO_FILE_PATH.MP4',
  source: 'PAGE_URL',
  videoFrame: 'src/videoframes/mediaelementjs.php',
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  ogv:  'OGV_VIDEO_FILE_PATH',
  loop: true,
  dontDelayOnRepeat: true,
  startAtOnRepeat: 2,
  parallaxLevel: 1.5,
  parallaxAxises: { x: 1 }
"></div>   <!-- LAYER -->

cover string Default: null

Sets the LAYER image cover.

<div class="mSCaption" data-mightyslider="
  cover: 'IMAGE_PATH.JPG'
"></div>   <!-- LAYER -->

<div class="mSCaption" data-mightyslider="
  cover: 'http://500px.com/photo/23718959'
"></div>   <!-- LAYER -->

Video Cover

Sets the LAYER video cover. Video covers is using HTML5 video so only supported in modern browsers.

<div class="mSCaption" data-mightyslider="
  cover: {
    webm: 'VIDEO_PATH.WEBM',
    mp4: 'VIDEO_PATH.MP4',
    poster: 'POSTER_PATH.JPG'
  }
"></div>   <!-- LAYER -->

Note:

Video covers are not supported in touch devices so you need to set poster option also for inserting image cover LAYER instead of the video like above example.

video string Default: null

Sets the LAYER video content.

<div class="mSCaption" data-mightyslider="
  video: 'MP4_VIDEO_FILE_PATH'
"></div>   <!-- LAYER -->

<div class="mSCaption" data-mightyslider="
  video: 'http://vimeo.com/32071937'
"></div>   <!-- LAYER -->

source string Default: null
Sets the LAYER iframe content with URL.
```
<div class="mSCaption" data-mightyslider="
  source: 'PAGE_URL'
"></div>   
```
Note:

If you use cover option you need to set the type option to 'iframe'.

videoFrame string Default: null

The URL of the video frame to play LAYER video with your custom player.

<div class="mSCaption" data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  videoFrame: 'src/videoframes/mediaelementjs.php',
  cover: 'COVER_IMAGE_PATH'
"></div>   <!-- LAYER -->

Video Frames:

MediaElement.js mediaelementjs.php and JW Player jwplayer.php.

mp4 string Default: null

Sets the H.264/MP4 video file for play in LAYER video content.

<div class="mSCaption" data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></div>   <!-- LAYER -->

webm string Default: null

Sets the VP8/WebM video file for play in LAYER video content.

<div class="mSCaption" data-mightyslider="
  mp4:  'MP4__VIDEO_FILE_PATH',
  webm: 'WEBM_VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></div>   <!-- LAYER -->

ogv string Default: null

Sets the Theora/OGG video file for play in LAYER video content.

<div class="mSCaption" data-mightyslider="
  mp4:  'MP4_VIDEO_FILE_PATH',
  ogv: 'OGV_VIDEO_FILE_PATH',
  cover: 'COVER_IMAGE_PATH'
"></div>   <!-- LAYER -->

loop boolean Default: false

Makes layer animaton to go from last key-frame to first.

<div class="mSCaption" data-mightyslider="
  loop: true
"></div>   <!-- LAYER -->

dontDelayOnRepeat boolean Default: false
Makes layer animaton to ignoring delay from started key-frame when its repeating.
```
<div class="mSCaption" data-mightyslider="
  loop: true,
  dontDelayOnRepeat: true
"></div>   
```

startAtOnRepeat number Default: 0

Makes layer animaton to start at specified key-frame or time when its repeating.

<div class="mSCaption" data-mightyslider="
  loop: true,
  startAtOnRepeat: 2
"></div>   <!-- LAYER -->

Makes layer animaton to start at 15 Seconds and 13 Microseconds when its repeating.

<div class="mSCaption" data-mightyslider="
  loop: true,
  startAtOnRepeat: '00:15.13'
"></div>   <!-- LAYER -->

parallaxLevel float Default: 0

Sets layer parallax effect sensitivity.

<div class="mSCaption" data-mightyslider="
  parallaxLevel: 1.5
"></div>   <!-- LAYER -->

parallaxAxises object Default: parallax

Sets layer parallax effect axises.

<div class="mSCaption" data-mightyslider="
  parallaxLevel: 1.5,
  parallaxAxises: { x: 1 }
"></div>   <!-- LAYER -->

<div class="mSCaption" data-mightyslider="
  parallaxLevel: 1.8,
  parallaxAxises: { x: 1, y: 1, z: 1 }
"></div>   <!-- LAYER -->

<div class="mSCaption" data-mightyslider="
  parallaxLevel: 1.5,
  parallaxAxises: { scroll: 1 }
"></div>   <!-- LAYER -->

Animating

The mightySlider lets authors control the intermediate steps in a CSS animation sequence by establishing key-frames (or waypoints) along the animation sequence that must be reached by certain points during the animation for layers. This gives you more specific control over the intermediate steps of the animation sequence.

For having high-performance animation rendering and more animation effects you need to include the mightySlider's animation engine (tweenlite.js) JS file into your page.

<!-- mightySlider's animation engine -->
<script type="text/javascript" src="mightyslider/src/js/tweenlite.js"></script>

Layer key-frames can be set using the data-msanimation attribute:

<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1 } }
"></div>   <!-- LAYER -->

To use key-frame, you need to create object rule with their properties. Separate key-frames objects with comma.

<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1 } },
  { speed: 700, style: { color: '#FFF' } }
"></div>   <!-- LAYER -->

Properties

delay number Default: 0

Makes animation key-frame start with delay.

<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1 } }
"></div>   <!-- LAYER -->

speed number Default: 0

A number determining how long the animation will run.

<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1 } }
"></div>   <!-- LAYER -->

easing string Default: swing
A string indicating which easing function to use for the transition. Default build in functions are linear & swing. For more, install the jQuery Easing Plugin.
```
<div class="mSCaption" data-msanimation="
  { speed: 700, easing: 'easeOutBounce', style: { opacity: 1 } }
"></div>   
```
mode string Default: 'to'
Keyframe instance mode for animates from the specified destination or animates to the specified destination styles. Possible values are 'to', 'from'.
```
<div class="mSCaption" data-msanimation="
  { speed: 700, mode: 'from', style: { y: 100 } }
"></div>   
```
staggerText object Default: {}
Creating an evenly-spaced sequence with a surprisingly small amount of code to apply effects to the letters, words and lines.
```
<div class="mSCaption" data-msanimation="
  { speed: 700, easing: 'easeOutElastic', mode: 'from', staggerText: { type: 'chars', delay: 0.01 }, style: { opacity: 0, scaleX: 0, scaleY: 2 }
"></div>   
```
Properties
- type string Default: 'chars'
  
  The split type which can be any of the following: chars, words, or lines.
- delay number Default: 0.01
  
  Amount of time in milliseconds to stagger the start time of each sequence.
style object Default: {}
An object of CSS properties and values that the animation will move toward. Just like jQuery.animate()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1 } }
"></div>   
```
The style property allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the jQuery.css() method, except that the range of properties is more restrictive.

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated (For example, width, height, or left can be animated but background-color and color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.
Animate CSS3 Styles
You can use CSS3 properties for animating layers.
- rotate angle
  The rotate CSS property defines a transformation that moves the element around a fixed point (as specified by the transform-origin property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called point reflection. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, rotation: 180 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'rotate(180deg)' } }
"></div>   
```
- rotateX angle
  The rotateX CSS property defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
  
  The axis of rotation passes by the origin, defined by transform-origin CSS property. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateX()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, rotationX: 90 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'rotateX(90deg)' } }
"></div>   
```
- rotateY angle
  The rotateY CSS property defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
  
  The axis of rotation passes by the origin, defined by transform-origin CSS property. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateY()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, rotationY: 90 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'rotateY(90deg)' } }
"></div>   
```
- rotateZ angle
  The rotateZ CSS property defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
  
  The axis of rotation passes by the origin, defined by transform-origin CSS property. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateZ()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, rotationZ: 50 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'rotateZ(50deg)' } }
"></div>   
```
- scale number
  The scale CSS property modify the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, if can do so more in one direction than in another one. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, scale: 0.5 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'scale(0.5)' } }
"></div>   
```
- scaleX number
  The scaleX CSS property modifies the abscissa of each element point by a constant factor, except if this scale factor is 1, in which case the property is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleX()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, scaleX: 0.5 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'scaleX(0.5)' } }
"></div>   
```
- scaleY number
  The scaleY CSS property modifies the ordinate of each element point by a constant factor except if this scale factor is 1, in which case the property is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleY()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, scaleY: 0.5 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'scaleY(0.5)' } }
"></div>   
```
- scaleZ number
  The scaleZ CSS property modifies the z-coordinate of each element point by a constant facto, except if this scale factor is 1, in which case the property is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleZ()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, scaleZ: 0.5 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'scaleZ(0.5)' } }
"></div>   
```
- skew angle
  The skew CSS property is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()_2
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, skew: 60 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'skew(60)' } }
"></div>   
```
- skewX angle
  The skewX CSS property is an horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewX()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, skewX: 45 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'skewX(45)' } }
"></div>   
```
- skewY angle
  The skewY CSS property is an vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewY()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, skewY: 45 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'skewY(45)' } }
"></div>   
```
- translate length
  The translate CSS property moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, translate: '45px, 50px' } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'translate(45px, 50px)' } }
"></div>   
```
- translateX length
  The translateX CSS property function moves horizontally the element on the plane. This transformation is characterized by a length defining how much it moves horizontally. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, x: 45 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'translateX(45px)' } }
"></div>   
```
- translateY length
  The translateY CSS property moves vertically the element on the plane. This transformation is characterized by a length defining how much it moves vertically. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateY()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, y: 50 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'translateY(50px)' } }
"></div>   
```
- translateZ length
  The translateZ CSS property moves the element along the z-axis of the 3D space. This transformation is characterized by a length defining how much it moves. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateZ()
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, z: 50 } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transform: 'translateZ(50px)' } }
"></div>   
```
- transform-origin length
  The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate property is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.) For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transformOrigin: '100% 100%' } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, transformOrigin: '-10em -30em' } }
"></div>   
```
- box-shadow string
  The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
  
  Interactive tool allowing to generate box-shadow.
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, boxShadow: '3px 3px 2px 0px rgba(0, 0, 0, 0.20)' } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, boxShadow: 'inset 3px 3px 2px 0px rgba(0, 0, 0, 0.20)' } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, boxShadow: '3px 3px 2px 0px rgba(0, 0, 0, 0.20), inset 3px 3px 2px 0px rgba(0, 0, 0, 0.20)' } }
"></div>   
```
- text-shadow string
  The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, textShadow: '1px 1px 2px black' } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, textShadow: '1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue' } }
"></div>   
```
- border-radius length
  The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse. For get more information refer to this document: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, borderRadius: '10px' } }
"></div>   
```
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { opacity: 1, borderRadius: '10px 40px 40px 10px' } }
"></div>   
```
Special Effects Properties
You can use special effects for animating layers. More to come...
- scrambleText object
  A textfield effect that scrambles your letters into place.
```
<div class="mSCaption" data-msanimation="
  { delay: 100, speed: 700, style: { scrambleText: { text: 'Animate text' } } }
"></div>   

<div class="mSCaption" data-msanimation="
  { delay: 900, speed: 700, style: { scrambleText: { text: 'Animate text', chars: '!@#$%^&*' } } }
"></div>   

<div class="mSCaption" data-msanimation="
  { delay: 1800, speed: 700, style: { scrambleText: { text: 'Animate text', chars: ' ' } } }
"></div>   
```

Skins are a combination of CSS and Images, together they style the slider elements.

Usage

To use a skin the only way is add the skin class name to the PARENT element.

<div class="mightySlider mightyslider_windows8_skin"></div>   <!-- PARENT -->

The skins available in 3 categories:

These examples not working they are just for displaying skins.

Slider Skins
The slider skins are located in src/slider_skins folder. Available skins are: mightyslider_fullscreen_skin, mightyslider_modern_skin, mightyslider_paper_skin and mightyslider_windows8_skin
Fullscreen
To use this skin the only way is add mightyslider_fullscreen_skin class to the PARENT element.
- 1
- 2
- 3
Modern
To use this skin the only way is add mightyslider_modern_skin class to the PARENT element.
- 1
- 2
- 3
Paper
To use this skin the only way is add mightyslider_paper_skin class to the PARENT element.
- 1
- 2
- 3
Windows 8
To use this skin the only way is add mightyslider_windows8_skin class to the PARENT element.
- 1
- 2
- 3
Carousel Skins
The carousel skins are located in src/carousel_skins folder. Available skins are: mightyslider_carouselCoverFlow_skin, mightyslider_carouselModern_skin and mightyslider_carouselSimple_skin
Simple
To use this skin the only way is add mightyslider_carouselSimple_skin class to the PARENT element.
- 1
- 2
- 3
Modern
To use this skin the only way is add mightyslider_carouselModern_skin class to the PARENT element.

Cover Flow
To use this skin the only way is add mightyslider_carouselCoverFlow_skin class to the PARENT element.
Tabs Skins
The tabs skins are located in src/tabs_skins folder. Available skins are: mightyslider_tabsBlack_skin, mightyslider_tabsBlackGlass_skin, mightyslider_tabsBlue_skin, mightyslider_tabsCrystal_skin, mightyslider_tabsGreen_skin, mightyslider_tabsGreenGlass_skin, mightyslider_tabsSilver_skin and mightyslider_tabsWhite_skin

You can see tabs skins here.

Styling Elements

There are a few rules you should follow:

FRAME should have no padding in a correspondent mightySlider direction.
SLIDEELEMENT should have no margin in a correspondent mightySlider direction.

In other words, if you enable horizontal mode, FRAME element should have no padding top & bottom, while SLIDEELEMENT should have no margin top & bottom. The same applies in vertical mode, but for left & right margins/padding.

You can apply padding to SLIDEELEMENT, or margins to slides, but do not use any other units than pixels, or you'll bork things.

Notable behaviors

You can go wild with your slides. Each one can be of different size, and have different margins & paddings. mightySlider is smart, and can figure it out :)
When forceCentered slide navigation is used, every slide is considered to be a separate page. That's because pages in this context don't make sense, so mightySlider creates a page button for each slide instead. Also, the nextPage & prevPage methods & buttons in this case do the exact same thing as next & prev methods & buttons.
When margin of a first slide (margin-top for vertical, margin-left for horizontal) is 0, the last margin of last slide is ignored, and SLIDEELEMENT won't go past the last slide border-box. That's so you don't have to fix last slide margins with li:last-child { margin-right: 0; }, or a custom .last-slide class to support older browsers when you want only spaces between slides, but not between first/last slide and a FRAME border.

Documentation

Documentation

Summary

Installation

Tip:

Usage

Markup

Terminology:

HTML

Media Types

Image

Auto Image Recognition

Sites covered:

Flash

Video

Note 1:

Note 2:

Video Frames:

Embedding

Youtube

Vimeo

Auto Video Recognition

Info:

Sites covered:

Options

FRAME Options

Info:

SLIDES Options

Note:

Note:

Note:

Video Frames:

Global Options

Quick reference

Video Frames:

Note:

Note:

JavaScript API

Calling

Calling new mightySlider class

Arguments:

Calling via jQuery proxy

Arguments:

Properties

Methods

Arguments:

Arguments:

Arguments:

Examples:

Arguments:

Arguments:

Arguments:

Examples:

Arguments:

Arguments:

Arguments:

Arguments:

Arguments:

Examples:

Arguments:

Arguments:

Examples:

Arguments:

Examples:

Arguments:

Examples:

Arguments:

Arguments:

Examples:

Arguments:

Arguments:

Events

Common arguments:

Events list:

Arguments:

Arguments:

Note:

Arguments:

Arguments:

Arguments: