Loading...
You can use direct video url
for full-sized videos & covers

Starter Plugin

This plugin shows one complete slide plus four partial of nearby slides at a same time which it increases the interest of seeing other slides by the visitors.

As usual you can simply use videos or images in any sizes or insert multiple animated layers over each slide, or add bullets, thumbnails or tabs.

Each slide takes a unique html value. It also can be used with auto playing feature.

The beautiful photos are by MARCUS ERIKSSON and you can see his website here: http://marcuseriksson.net/

Usage

You need to put the following scripts just before the <⁄body>
<script type="text/javascript">
    jQuery(document).ready(function($) {
	    // Calling starter plugin via jQuery proxy
        $('.frame').mSStarterPlugin({
            startAt: 2
        });
    });
</script>
You need to put the following html markup in your html document where you want to have slider.
<!-- PARENT -->
<div id="example" class="mightyslider_modern_skin black">
    <!-- FRAME -->
    <div class="frame" data-mightyslider="
        width: 1585,
        height: 500
    ">
        <!-- SLIDEELEMENT -->
        <div class="slide_element">
            <!-- SLIDES -->
            <div class="slide prev_2" data-mightyslider="
                cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27898.jpg',
                thumbnail: 'http://mightyslider.com/assets/img/photos/MS-test-day-27898_thumb.jpg'
            "></div>
            <div class="slide prev_1" data-mightyslider="
                cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27771.jpg',
                thumbnail: 'MS-test-day-27771_thumb.jpg'
            "></div>
            <div class="slide active" data-mightyslider="
                cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27845.jpg',
                video: 'http://vimeo.com/32685545',
                thumbnail: 'MS-test-day-27845_thumb.jpg'
            ">
                <!-- LAYER -->
                <div class="mSCaption">
                    You can use direct video url<br />for full-sized videos & covers
                </div>
            </div>
            <div class="slide next_1" data-mightyslider="
                cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27780.jpg',
                thumbnail: 'MS-test-day-27780_thumb.jpg'
            "></div>
            <div class="slide next_2" data-mightyslider="
                cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27749.jpg',
                thumbnail: 'MS-test-day-27749_thumb.jpg'
            "></div>
            <div class="slide" data-mightyslider="
                cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-278081.jpg',
                thumbnail: 'MS-test-day-278081_thumb.jpg'
            "></div>
            <!-- END OF SLIDES -->
        </div>
        <!-- END OF SLIDEELEMENT -->
    </div>
    <!-- END OF FRAME -->
</div>
<!-- END OF PARENT -->
You need to put the following styles just before the </head>
<style>
    /*
        Style the animated layer
    */
    #example .mSCaption {
        left: 20px;
        bottom: 40px;
        font-size: 18px;
        line-height: normal;
        font-weight: 300;
        color: #000;
        opacity: 0;
        letter-spacing: -1px;
        white-space: nowrap;
        text-transform: uppercase;
        z-index: 1002;

        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    #example .mSCaption.showed {
        bottom: 20px;
        opacity: 1;
    }
</style>

<!DOCTYPE html>
<html>
<head>
    <title></title>

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

    <style>
        /*
            Style the animated layer
        */
        #example .mSCaption {
            left: 20px;
            bottom: 40px;
            font-size: 18px;
            line-height: normal;
            font-weight: 300;
            color: #000;
            opacity: 0;
            letter-spacing: -1px;
            white-space: nowrap;
            text-transform: uppercase;
            z-index: 1002;

            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
        #example .mSCaption.showed {
            bottom: 20px;
            opacity: 1;
        }
    </style>
</head>
<body>

    <!-- PARENT -->
    <div id="example" class="mightyslider_modern_skin black">
        <!-- FRAME -->
        <div class="frame" data-mightyslider="
            width: 1585,
            height: 500
        ">
            <!-- SLIDEELEMENT -->
            <div class="slide_element">
                <!-- SLIDES -->
                <div class="slide prev_2" data-mightyslider="
                    cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27898.jpg',
                    thumbnail: 'http://mightyslider.com/assets/img/photos/MS-test-day-27898_thumb.jpg'
                "></div>
                <div class="slide prev_1" data-mightyslider="
                    cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27771.jpg',
                    thumbnail: 'MS-test-day-27771_thumb.jpg'
                "></div>
                <div class="slide active" data-mightyslider="
                    cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27845.jpg',
                    video: 'http://vimeo.com/32685545',
                    thumbnail: 'MS-test-day-27845_thumb.jpg'
                ">
                    <!-- LAYER -->
                    <div class="mSCaption">
                        You can use direct video url<br />for full-sized videos & covers
                    </div>
                </div>
                <div class="slide next_1" data-mightyslider="
                    cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27780.jpg',
                    thumbnail: 'MS-test-day-27780_thumb.jpg'
                "></div>
                <div class="slide next_2" data-mightyslider="
                    cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-27749.jpg',
                    thumbnail: 'MS-test-day-27749_thumb.jpg'
                "></div>
                <div class="slide" data-mightyslider="
                    cover: 'http://mightyslider.com/assets/img/photos/MS-test-day-278081.jpg',
                    thumbnail: 'MS-test-day-278081_thumb.jpg'
                "></div>
                <!-- END OF SLIDES -->
            </div>
            <!-- END OF SLIDEELEMENT -->
        </div>
        <!-- END OF FRAME -->
    </div>
    <!-- END OF PARENT -->

    <!-- mightySlider 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/jquery.min.js"></script>
    <!-- Mobile touch events for jQuery -->
    <script type="text/javascript" src="http://mightyslider.com/assets/js/jquery.mobile.just-touch.js"></script>
    <!-- mightySlider layers animation engine -->
    <script type="text/javascript" src="mightyslider/src/js/tweenlite.js"></script>
    <!-- Main slider JS script file -->
    <script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script>

    <!-- Starter plugin JS script file -->
    <script type="text/javascript" src="mightyslider/src/js/mightyslider.starter-plugin.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
	        // Calling starter plugin via jQuery proxy
            $('.frame').mSStarterPlugin({
                startAt: 2
            });
        });
    </script>
</body>
</html>

Installation

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 and mightyslider.starter-plugin.min.js below jQuery. Also include mightyslider.css and mightyslider.starter-plugin.css and make sure the include paths point to the locations where the files have been uploaded.

<!-- Starter Plugin requires jQuery 1.7+ and mightySlider 2+  -->
<!-- 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>
<!-- mightyslider JS script file -->
<script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script>
<!-- Starter Plugin JS script file -->
<script type="text/javascript" src="mightyslider.starter-plugin.min.js"></script>

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

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

Tip:

Gzipping helps reduce the total filesize to just 16kb.

Usage

HTML

You can use mightySlider documentation for HTML structure.


Calling via jQuery proxy

jQuery( '#frame' ).mSStarterPlugin( [ options ] );

     Arguments:

  • [ options ] object

    Object with plugin options. All options are documented below:


    Quick reference:

    Starter Plugin call with all default options as defined in the source.

    jQuery( '#frame' ).mSStarterPlugin({
  // Options
  speed:      1500,  // Animations speed in milliseconds. 0 to disable animations.
  startAt:    0,     // Starting offset in slides.
  arrows:     1,     // Enable navigation arrows.
  timeBar:    1,     // Enable time loader bar.
  slideSize:  '70%'  // Sets the slides size. Can be: Fixed(500) or Percent('100%') number.
});
    • speed number Default: 1500

      Animations speed in milliseconds. 0 to disable animations.

    • startAt number Default: 0

      Starting offset in slides.

      startAt: 2
    • arrows boolean Default: true

      Enable navigation arrows.

      arrows: 0
    • timeBar boolean Default: true

      Enable time loader bar.

      timeBar: 0
    • slideSize number string Default: '70%'

      Sets the slides size. Can be: Fixed(500) or Percent('100%') number.

      slideSize: '80%'

      slideSize: 300   // 300px