Loading...




Apple template slider stretched to full width of wrapper.

Slider animate with custom easing effect.

Every slide has diffrent viewport and custom navigation color.

Code View

You need to put the following scripts just before the <⁄body>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        var $win = $(window),
            isTouch = !!('ontouchstart' in window),
            clickEvent = isTouch ? 'tap' : 'click';

        (function(){
            // Global slider's DOM elements
            var $example = $('#example'),
                $frame = $('.frame', $example);

            // Calling mightySlider via jQuery proxy
            $frame.mightySlider({
                speed: 1000,
                easing: 'easeOutExpo',
                viewport: 'center',
                
                // Navigation options
                navigation: {
                    slideSize: '100%',
                    keyboardNavBy: 'slides'
                },

                // Dragging options
                dragging: {
                    swingSpeed:    0.1
                },

                // Thumbnails options
                thumbnails: {
                    thumbnailNav: 'forceCentered',
                    activateOn: clickEvent
                },

                // Commands options
                commands: {
                    pages: 1,
                    thumbnails: 1,
                    buttons: 1
                }
            },

            // Register callbacks to the events
            {
                // Register mightySlider :active event callback
                active: function(name, index){
                    var skin = this.slides[index].options.skin || '';
                    $example.removeClass('black').addClass(skin);
                }
            });
        })();
    });
</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">
    <!-- FRAME -->
    <div class="frame">
        <!-- SLIDEELEMENT -->
        <div class="slide_element">
            <!-- SLIDES -->
            <div class="slide1" data-mightyslider="
                cover: 'assets/img/apple_images/ios_hero.png',
                thumbnail: 'assets/img/apple_images/ios_thum.jpg',
                link: {
                    url: 'http://www.apple.com/ios/ios7/',
                    target: '_blank'
                },
                skin: 'black'
            ">
                <div class="texts">
                    <h2><a href="http://www.apple.com/ios/ios7/">iOS 7. The mobile OS from a whole new perspective.</a></h2>
                    <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                    <a href="http://www.apple.com/ios/ios7/" target="_blank" class="learn">Learn more</a>
                </div>
            </div>
            <div class="slide2" data-mightyslider="
                cover: 'assets/img/apple_images/osx_hero.jpg',
                thumbnail: 'assets/img/apple_images/osx_thum.jpg',
                link: {
                    url: 'http://www.apple.com/osx/preview/',
                    target: '_blank'
                },
                viewport: 'fill'
            ">
                <div class="texts">
                    <h2><a href="http://www.apple.com/osx/preview/">OS X Mavericks. The next big release of the world’s most advanced desktop operating system.</a></h2>
                    <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                    <a href="http://www.apple.com/osx/preview/" target="_blank" class="learn">Learn more</a>
                </div>
            </div>
            <div class="slide3" data-mightyslider="
                cover: 'assets/img/apple_images/macpro_h.jpg',
                thumbnail: 'assets/img/apple_images/macpro_t.jpg',
                link: {
                    url: 'http://www.apple.com/mac-pro/',
                    target: '_blank'
                }
            ">
                <div class="texts">
                    <h2><a href="http://www.apple.com/mac-pro/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2>
                    <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                    <a href="http://www.apple.com/mac-pro/" target="_blank" class="learn">Learn more</a>
                </div>
            </div>
            <div class="slide4" data-mightyslider="
                cover: 'assets/img/apple_images/macbookb.jpg',
                thumbnail: 'assets/img/apple_images/macbooka.jpg',
                link: {
                    url: 'http://www.apple.com/macbook-air/',
                    target: '_blank'
                },
                skin: 'black'
            ">
                <div class="texts">
                    <h2><a href="http://www.apple.com/macbook-air/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2>
                    <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                    <a href="http://www.apple.com/macbook-air/" target="_blank" class="learn">Learn more</a>
                </div>
            </div>
            <div class="slide5" data-mightyslider="
                cover: 'assets/img/apple_images/designee.jpg',
                thumbnail: 'assets/img/apple_images/designed.jpg',
                link: {
                    url: 'http://www.apple.com/designed-by-apple/',
                    target: '_blank'
                },
                viewport: 'fill'
            ">
                <div class="texts">
                    <h2><a href="http://www.apple.com/designed-by-apple/">Designed by Apple in California</a></h2>
                    <a href="http://www.apple.com/#designed-by-apple-tv-spot" target="_blank" class="watch">Watch the TV ad</a>
                    <a href="http://www.apple.com/designed-by-apple/" target="_blank" class="learn">Learn more</a>
                </div>
            </div>
            <div class="slide6" data-mightyslider="
                cover: 'assets/img/apple_images/itunesrb.png',
                thumbnail: 'assets/img/apple_images/itunesra.jpg',
                link: {
                    url: 'http://www.apple.com/itunes/itunes-radio/',
                    target: '_blank'
                },
                skin: 'black'
            ">
                <div class="texts">
                    <h2><a href="http://www.apple.com/itunes/itunes-radio/">iTunes Radio. Hear where your music takes you.</a></h2>
                    <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                    <a href="http://www.apple.com/itunes/itunes-radio/" target="_blank" class="learn">Learn more</a>
                </div>
            </div>
            <div class="slide7" data-mightyslider="
                cover: 'assets/img/apple_images/wwdc_her.jpg',
                thumbnail: 'assets/img/apple_images/wwdc_thu.jpg',
                link: {
                    url: 'http://www.apple.com/apple-events/june-2013/',
                    target: '_blank'
                },
                viewport: 'fill'
            ">
                <div class="texts">
                    <h2><a href="http://www.apple.com/apple-events/june-2013/">WWDC 2013</a></h2>
                    <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                </div>
            </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>
    #example {
        background: transparent;
        width: 100%;
        height: 709px;
        min-width: 980px;
        overflow: hidden;
    }
    #example .frame {
        width: 100%;
        height: 100%;
    }
    #example .frame .slide_element {
        height: 100%;
    }
    #example .frame .slide_element > div {
        float: left;
        height: 100%;
        overflow: hidden;
    }
    #example .frame .mSCover img {
        max-width: none;
    }
    #example .frame .slide_element > div.slide1,
    #example .frame .slide_element > div.slide6 {
        background: #fafafa;
    }
    #example .frame .slide_element > div.slide1 .mSCover {
        margin-top: 27px;
        margin-left: 108px;
    }
    #example .frame .slide_element > div.slide3 {
        background: #000;
    }
    #example .frame .slide_element > div.slide3 .mSCover {
        margin-top: 22px;
    }
    #example .frame .slide_element > div.slide4 .mSCover {
        margin-top: -304px;
        margin-left: -153px;
    }
    #example .frame .slide_element > div.slide6 .mSCover {
        margin-left: -174px;
        margin-top: 0;
    }
    #example .frame .slide_element div.texts {
        position: absolute;
        width: 980px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        color: #000;
        z-index: 1001;
        pointer-events: none;
    }
    #example .frame .slide_element div.texts a {
        pointer-events: all;
    }
    #example .frame .slide_element div.texts h2 {
        display: block;
        overflow: hidden;
        text-indent: -9999px;
    }
    #example .frame .slide_element div.texts h2 a {
        display: block;
        overflow: hidden;
        text-indent: -9999px;
    }
    #example .frame .slide_element > div.slide1 div.texts h2 {
        margin-top: 105px;
        margin-left: 39px;
        margin-bottom: 12px;
        width: 400px;
        
    }
    #example .frame .slide_element > div.slide1 div.texts h2 a {
        width: 500px;
        height: 194px;
        background: url(assets/img/apple_images/ios_titl.png) no-repeat 0 0;
        background-size: 500px 194px;
    }
    #example .frame .slide_element div.texts a.watch,
    #example .frame .slide_element div.texts a.learn {
        display: block;
        margin: 0 0 0 42px;
        width: 148px;
        height: 0;
        padding-top: 35px;
        overflow: hidden;
        cursor: pointer;
        background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0;
        background-size: 255px 70px;
        zoom: 1;
    }
    #example .frame .slide_element div.texts a.watch:hover,
    #example .frame .slide_element div.texts a.learn:hover {
        background-position: 0 100% !important;
    }
    #example .frame .slide_element div.texts a.watch {
        width: 255px;
        background-image: url(assets/img/apple_images/watch_ke.png);
    }
    #example .frame .slide_element > div.slide1 div.texts a.learn {
        margin-top: 4px;
    }
    #example .frame .slide_element > div.slide2 div.texts,
    #example .frame .slide_element > div.slide3 div.texts,
    #example .frame .slide_element > div.slide4 div.texts,
    #example .frame .slide_element > div.slide5 div.texts,
    #example .frame .slide_element > div.slide6 div.texts,
    #example .frame .slide_element > div.slide7 div.texts {
        text-align: center;
    }
    #example .frame .slide_element > div.slide2 div.texts h2 {
        width: 581px;
        height: 475px;
        margin: 0 auto;
        margin-top: 95px;
        margin-bottom: -57px;
    }
    #example .frame .slide_element > div.slide2 div.texts h2 a {
        width: 581px;
        height: 475px;
        background: url(assets/img/apple_images/osx_titl.png) no-repeat 0 0;
        background-size: 581px 475px;
    }
    #example .frame .slide_element > div.slide2 div.texts a.watch,
    #example .frame .slide_element > div.slide2 div.texts a.learn,
    #example .frame .slide_element > div.slide3 div.texts a.watch,
    #example .frame .slide_element > div.slide3 div.texts a.learn,
    #example .frame .slide_element > div.slide4 div.texts a.watch,
    #example .frame .slide_element > div.slide4 div.texts a.learn,
    #example .frame .slide_element > div.slide5 div.texts a.watch,
    #example .frame .slide_element > div.slide5 div.texts a.learn,
    #example .frame .slide_element > div.slide6 div.texts a.watch,
    #example .frame .slide_element > div.slide6 div.texts a.learn,
    #example .frame .slide_element > div.slide7 div.texts a.watch {
        display: inline-block;
        margin: 0 35px 0 0;
        background: url(assets/img/apple_images/learn_mq.png) no-repeat 0 0;
        background-size: 255px 70px;
        zoom: 1;
    }
    #example .frame .slide_element > div.slide2 div.texts a.watch,
    #example .frame .slide_element > div.slide3 div.texts a.watch,
    #example .frame .slide_element > div.slide4 div.texts a.watch,
    #example .frame .slide_element > div.slide5 div.texts a.watch {
        width: 255px;
        margin-left: 35px;
        background-image: url(assets/img/apple_images/watch_kg.png);
    }

    #example .frame .slide_element > div.slide3 div.texts h2 {
        width: 700px;
        height: 150px;
        margin: 0 auto;
        margin-top: 368px;
        margin-bottom: 4px;
    }
    #example .frame .slide_element > div.slide3 div.texts h2 a {
        width: 700px;
        height: 150px;
        background: url(assets/img/apple_images/macpro_t.png) no-repeat 0 0;
        background-size: 700px 150px;
    }
    #example .frame .slide_element > div.slide3 div.texts a.watch,
    #example .frame .slide_element > div.slide3 div.texts a.learn {
        background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0;
    }
    #example .frame .slide_element > div.slide3 div.texts a.watch {
        background-image: url(assets/img/apple_images/watch_kf.png);
    }


    #example .frame .slide_element > div.slide4 div.texts h2 {
        width: 1000px;
        height: 132px;
        margin: 0 auto;
        margin-top: 409px;
        margin-bottom: 18px;
    }
    #example .frame .slide_element > div.slide4 div.texts h2 a {
        width: 1000px;
        height: 132px;
        background: url(assets/img/apple_images/macbooka.png) no-repeat 0 0;
        background-size: 1000px 132px;
    }
    #example .frame .slide_element > div.slide4 div.texts a.watch,
    #example .frame .slide_element > div.slide4 div.texts a.learn {
        background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0;
    }
    #example .frame .slide_element > div.slide4 div.texts a.watch {
        background-image: url(assets/img/apple_images/watch_ke.png);
    }


    #example .frame .slide_element > div.slide5 div.texts h2 {
        width: 900px;
        height: 75px;
        margin: 0 auto;
        margin-top: 290px;
        margin-bottom: 18px;
    }
    #example .frame .slide_element > div.slide5 div.texts h2 a {
        width: 900px;
        height: 75px;
        background: url(assets/img/apple_images/designed.png) no-repeat 0 0;
        background-size: 900px 75px;
    }
    #example .frame .slide_element > div.slide5 div.texts a.watch,
    #example .frame .slide_element > div.slide5 div.texts a.learn {
        background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0;
    }
    #example .frame .slide_element > div.slide5 div.texts a.watch {
        width: 224px;
        background-image: url(assets/img/apple_images/watch_ad.png);
    }


    #example .frame .slide_element > div.slide6 div.texts h2 {
        width: 480px;
        height: 135px;
        margin-left: 460px;
        margin-top: 260px;
        margin-bottom: 18px;
    }
    #example .frame .slide_element > div.slide6 div.texts h2 a {
        width: 480px;
        height: 135px;
        background: url(assets/img/apple_images/itunesra.png) no-repeat 0 0;
        background-size: 480px 135px;
    }
    #example .frame .slide_element > div.slide6 div.texts a.watch,
    #example .frame .slide_element > div.slide6 div.texts a.learn {
        background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0;
    }
    #example .frame .slide_element > div.slide6 div.texts a.learn {
        margin-right: 0;
    }
    #example .frame .slide_element > div.slide6 div.texts a.watch {
        background-image: url(assets/img/apple_images/watch_ke.png);
        margin-left: 420px;
    }


    #example .frame .slide_element > div.slide7 div.texts h2 {
        width: 600px;
        height: 300px;
        margin: 0 auto;
        margin-top: 200px;
        margin-bottom: -115px;
    }
    #example .frame .slide_element > div.slide7 div.texts h2 a {
        width: 600px;
        height: 300px;
        background: url(assets/img/apple_images/wwdc_tit.png) no-repeat 0 0;
        background-size: 600px 300px;
    }
    #example .frame .slide_element > div.slide7 div.texts a.watch {
        background: url(assets/img/apple_images/watch_kf.png) no-repeat 0 0;
        margin: 0 auto;
    }
</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"/>

    <style>
        #example {
            background: transparent;
            width: 100%;
            height: 709px;
            min-width: 980px;
            overflow: hidden;
        }
        #example .frame {
            width: 100%;
            height: 100%;
        }
        #example .frame .slide_element {
            height: 100%;
        }
        #example .frame .slide_element > div {
            float: left;
            height: 100%;
            overflow: hidden;
        }
        #example .frame .mSCover img {
            max-width: none;
        }
        #example .frame .slide_element > div.slide1,
        #example .frame .slide_element > div.slide6 {
            background: #fafafa;
        }
        #example .frame .slide_element > div.slide1 .mSCover {
            margin-top: 27px;
            margin-left: 108px;
        }
        #example .frame .slide_element > div.slide3 {
            background: #000;
        }
        #example .frame .slide_element > div.slide3 .mSCover {
            margin-top: 22px;
        }
        #example .frame .slide_element > div.slide4 .mSCover {
            margin-top: -304px;
            margin-left: -153px;
        }
        #example .frame .slide_element > div.slide6 .mSCover {
            margin-left: -174px;
            margin-top: 0;
        }
        #example .frame .slide_element div.texts {
            position: absolute;
            width: 980px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            color: #000;
            z-index: 1001;
            pointer-events: none;
        }
        #example .frame .slide_element div.texts a {
            pointer-events: all;
        }
        #example .frame .slide_element div.texts h2 {
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }
        #example .frame .slide_element div.texts h2 a {
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }
        #example .frame .slide_element > div.slide1 div.texts h2 {
            margin-top: 105px;
            margin-left: 39px;
            margin-bottom: 12px;
            width: 400px;
            
        }
        #example .frame .slide_element > div.slide1 div.texts h2 a {
            width: 500px;
            height: 194px;
            background: url(assets/img/apple_images/ios_titl.png) no-repeat 0 0;
            background-size: 500px 194px;
        }
        #example .frame .slide_element div.texts a.watch,
        #example .frame .slide_element div.texts a.learn {
            display: block;
            margin: 0 0 0 42px;
            width: 148px;
            height: 0;
            padding-top: 35px;
            overflow: hidden;
            cursor: pointer;
            background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0;
            background-size: 255px 70px;
            zoom: 1;
        }
        #example .frame .slide_element div.texts a.watch:hover,
        #example .frame .slide_element div.texts a.learn:hover {
            background-position: 0 100% !important;
        }
        #example .frame .slide_element div.texts a.watch {
            width: 255px;
            background-image: url(assets/img/apple_images/watch_ke.png);
        }
        #example .frame .slide_element > div.slide1 div.texts a.learn {
            margin-top: 4px;
        }
        #example .frame .slide_element > div.slide2 div.texts,
        #example .frame .slide_element > div.slide3 div.texts,
        #example .frame .slide_element > div.slide4 div.texts,
        #example .frame .slide_element > div.slide5 div.texts,
        #example .frame .slide_element > div.slide6 div.texts,
        #example .frame .slide_element > div.slide7 div.texts {
            text-align: center;
        }
        #example .frame .slide_element > div.slide2 div.texts h2 {
            width: 581px;
            height: 475px;
            margin: 0 auto;
            margin-top: 95px;
            margin-bottom: -57px;
        }
        #example .frame .slide_element > div.slide2 div.texts h2 a {
            width: 581px;
            height: 475px;
            background: url(assets/img/apple_images/osx_titl.png) no-repeat 0 0;
            background-size: 581px 475px;
        }
        #example .frame .slide_element > div.slide2 div.texts a.watch,
        #example .frame .slide_element > div.slide2 div.texts a.learn,
        #example .frame .slide_element > div.slide3 div.texts a.watch,
        #example .frame .slide_element > div.slide3 div.texts a.learn,
        #example .frame .slide_element > div.slide4 div.texts a.watch,
        #example .frame .slide_element > div.slide4 div.texts a.learn,
        #example .frame .slide_element > div.slide5 div.texts a.watch,
        #example .frame .slide_element > div.slide5 div.texts a.learn,
        #example .frame .slide_element > div.slide6 div.texts a.watch,
        #example .frame .slide_element > div.slide6 div.texts a.learn,
        #example .frame .slide_element > div.slide7 div.texts a.watch {
            display: inline-block;
            margin: 0 35px 0 0;
            background: url(assets/img/apple_images/learn_mq.png) no-repeat 0 0;
            background-size: 255px 70px;
            zoom: 1;
        }
        #example .frame .slide_element > div.slide2 div.texts a.watch,
        #example .frame .slide_element > div.slide3 div.texts a.watch,
        #example .frame .slide_element > div.slide4 div.texts a.watch,
        #example .frame .slide_element > div.slide5 div.texts a.watch {
            width: 255px;
            margin-left: 35px;
            background-image: url(assets/img/apple_images/watch_kg.png);
        }

        #example .frame .slide_element > div.slide3 div.texts h2 {
            width: 700px;
            height: 150px;
            margin: 0 auto;
            margin-top: 368px;
            margin-bottom: 4px;
        }
        #example .frame .slide_element > div.slide3 div.texts h2 a {
            width: 700px;
            height: 150px;
            background: url(assets/img/apple_images/macpro_t.png) no-repeat 0 0;
            background-size: 700px 150px;
        }
        #example .frame .slide_element > div.slide3 div.texts a.watch,
        #example .frame .slide_element > div.slide3 div.texts a.learn {
            background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0;
        }
        #example .frame .slide_element > div.slide3 div.texts a.watch {
            background-image: url(assets/img/apple_images/watch_kf.png);
        }


        #example .frame .slide_element > div.slide4 div.texts h2 {
            width: 1000px;
            height: 132px;
            margin: 0 auto;
            margin-top: 409px;
            margin-bottom: 18px;
        }
        #example .frame .slide_element > div.slide4 div.texts h2 a {
            width: 1000px;
            height: 132px;
            background: url(assets/img/apple_images/macbooka.png) no-repeat 0 0;
            background-size: 1000px 132px;
        }
        #example .frame .slide_element > div.slide4 div.texts a.watch,
        #example .frame .slide_element > div.slide4 div.texts a.learn {
            background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0;
        }
        #example .frame .slide_element > div.slide4 div.texts a.watch {
            background-image: url(assets/img/apple_images/watch_ke.png);
        }


        #example .frame .slide_element > div.slide5 div.texts h2 {
            width: 900px;
            height: 75px;
            margin: 0 auto;
            margin-top: 290px;
            margin-bottom: 18px;
        }
        #example .frame .slide_element > div.slide5 div.texts h2 a {
            width: 900px;
            height: 75px;
            background: url(assets/img/apple_images/designed.png) no-repeat 0 0;
            background-size: 900px 75px;
        }
        #example .frame .slide_element > div.slide5 div.texts a.watch,
        #example .frame .slide_element > div.slide5 div.texts a.learn {
            background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0;
        }
        #example .frame .slide_element > div.slide5 div.texts a.watch {
            width: 224px;
            background-image: url(assets/img/apple_images/watch_ad.png);
        }


        #example .frame .slide_element > div.slide6 div.texts h2 {
            width: 480px;
            height: 135px;
            margin-left: 460px;
            margin-top: 260px;
            margin-bottom: 18px;
        }
        #example .frame .slide_element > div.slide6 div.texts h2 a {
            width: 480px;
            height: 135px;
            background: url(assets/img/apple_images/itunesra.png) no-repeat 0 0;
            background-size: 480px 135px;
        }
        #example .frame .slide_element > div.slide6 div.texts a.watch,
        #example .frame .slide_element > div.slide6 div.texts a.learn {
            background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0;
        }
        #example .frame .slide_element > div.slide6 div.texts a.learn {
            margin-right: 0;
        }
        #example .frame .slide_element > div.slide6 div.texts a.watch {
            background-image: url(assets/img/apple_images/watch_ke.png);
            margin-left: 420px;
        }


        #example .frame .slide_element > div.slide7 div.texts h2 {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            margin-top: 200px;
            margin-bottom: -115px;
        }
        #example .frame .slide_element > div.slide7 div.texts h2 a {
            width: 600px;
            height: 300px;
            background: url(assets/img/apple_images/wwdc_tit.png) no-repeat 0 0;
            background-size: 600px 300px;
        }
        #example .frame .slide_element > div.slide7 div.texts a.watch {
            background: url(assets/img/apple_images/watch_kf.png) no-repeat 0 0;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <!-- PARENT -->
    <div id="example" class="mightyslider_modern_skin">
        <!-- FRAME -->
        <div class="frame">
            <!-- SLIDEELEMENT -->
            <div class="slide_element">
                <!-- SLIDES -->
                <div class="slide1" data-mightyslider="cover: 'assets/img/apple_images/ios_hero.png', thumbnail: 'assets/img/apple_images/ios_thum.jpg', link: { url: 'http://www.apple.com/ios/ios7/', target: '_blank' }, skin: 'black'">
                    <div class="texts">
                        <h2><a href="http://www.apple.com/ios/ios7/">iOS 7. The mobile OS from a whole new perspective.</a></h2>
                        <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                        <a href="http://www.apple.com/ios/ios7/" target="_blank" class="learn">Learn more</a>
                    </div>
                </div>
                <div class="slide2" data-mightyslider="cover: 'assets/img/apple_images/osx_hero.jpg', thumbnail: 'assets/img/apple_images/osx_thum.jpg', link: { url: 'http://www.apple.com/osx/preview/', target: '_blank' }, viewport: 'fill'">
                    <div class="texts">
                        <h2><a href="http://www.apple.com/osx/preview/">OS X Mavericks. The next big release of the world’s most advanced desktop operating system.</a></h2>
                        <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                        <a href="http://www.apple.com/osx/preview/" target="_blank" class="learn">Learn more</a>
                    </div>
                </div>
                <div class="slide3" data-mightyslider="cover: 'assets/img/apple_images/macpro_h.jpg', thumbnail: 'assets/img/apple_images/macpro_t.jpg', link: { url: 'http://www.apple.com/mac-pro/', target: '_blank' }">
                    <div class="texts">
                        <h2><a href="http://www.apple.com/mac-pro/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2>
                        <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                        <a href="http://www.apple.com/mac-pro/" target="_blank" class="learn">Learn more</a>
                    </div>
                </div>
                <div class="slide4" data-mightyslider="cover: 'assets/img/apple_images/macbookb.jpg', thumbnail: 'assets/img/apple_images/macbooka.jpg', link: { url: 'http://www.apple.com/macbook-air/', target: '_blank' }, skin: 'black'">
                    <div class="texts">
                        <h2><a href="http://www.apple.com/macbook-air/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2>
                        <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                        <a href="http://www.apple.com/macbook-air/" target="_blank" class="learn">Learn more</a>
                    </div>
                </div>
                <div class="slide5" data-mightyslider="cover: 'assets/img/apple_images/designee.jpg', thumbnail: 'assets/img/apple_images/designed.jpg', link: { url: 'http://www.apple.com/designed-by-apple/', target: '_blank' }, viewport: 'fill'">
                    <div class="texts">
                        <h2><a href="http://www.apple.com/designed-by-apple/">Designed by Apple in California</a></h2>
                        <a href="http://www.apple.com/#designed-by-apple-tv-spot" target="_blank" class="watch">Watch the TV ad</a>
                        <a href="http://www.apple.com/designed-by-apple/" target="_blank" class="learn">Learn more</a>
                    </div>
                </div>
                <div class="slide6" data-mightyslider="cover: 'assets/img/apple_images/itunesrb.png', thumbnail: 'assets/img/apple_images/itunesra.jpg', link: { url: 'http://www.apple.com/itunes/itunes-radio/', target: '_blank' }, skin: 'black'">
                    <div class="texts">
                        <h2><a href="http://www.apple.com/itunes/itunes-radio/">iTunes Radio. Hear where your music takes you.</a></h2>
                        <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                        <a href="http://www.apple.com/itunes/itunes-radio/" target="_blank" class="learn">Learn more</a>
                    </div>
                </div>
                <div class="slide7" data-mightyslider="cover: 'assets/img/apple_images/wwdc_her.jpg', thumbnail: 'assets/img/apple_images/wwdc_thu.jpg', link: { url: 'http://www.apple.com/apple-events/june-2013/', target: '_blank' }, viewport: 'fill'">
                    <div class="texts">
                        <h2><a href="http://www.apple.com/apple-events/june-2013/">WWDC 2013</a></h2>
                        <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 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.10.2/jquery.min.js"></script>
    <!-- Uses the built in easing capabilities added In jQuery 1.1 to offer multiple easing options -->
    <script type="text/javascript" src="assets/js/jquery.easing-1.3.pack.js"></script>
    <!-- Mobile touch events for jQuery -->
    <script type="text/javascript" src="assets/js/jquery.mobile.just-touch.js"></script>
    <!-- Main slider JS script file -->
    <script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var $win = $(window),
                isTouch = !!('ontouchstart' in window),
                clickEvent = isTouch ? 'tap' : 'click';

            (function(){
                // Global slider's DOM elements
                var $example = $('#example'),
                    $frame = $('.frame', $example);

                // Calling new mightySlider class
                $frame.mightySlider({
                    speed: 1000,
                    easing: 'easeOutExpo',
                    viewport: 'center',
                    
                    // Navigation options
                    navigation: {
                        slideSize: '100%',
                        keyboardNavBy: 'slides'
                    },

                    // Dragging options
                    dragging: {
                        swingSpeed:    0.1
                    },

                    // Thumbnails options
                    thumbnails: {
                        thumbnailNav: 'forceCentered',
                        activateOn: clickEvent
                    },

                    // Commands options
                    commands: {
                        pages: 1,
                        thumbnails: 1,
                        buttons: 1
                    }
                },

                // Register callbacks to the events
                {
                    // Register mightySlider :active event callback
                    active: function(name, index){
                        var skin = this.slides[index].options.skin || '';
                        $example.removeClass('black').addClass(skin);
                    }
                });
            })();
        });
    </script>
</body>
</html>