Loading...




    You can use direct video url
    for full-sized videos & covers
    HTML5 VIDEO          custom video player
    &

    mightySlider supports YouTube, Vimeo, Metacafe, Dailymotion, Twitvid and HTML5 videos and there is options to add custom players (includes example with mediaelementjs integration for HTML version).

    You can also add iframe of video directly inside slide, but it'll block touch navigation on some devices and transition between slides will be not so smooth.

    Despite that this example is called video slider, but you can put anything inside each slide.

    Also, you can enable permalinks to link to specific slide by url, like here.

    Code View

    You need to put the following scripts just before the <⁄body>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var isTouch = !!('ontouchstart' in window),
                clickEvent = isTouch ? 'tap' : 'click';
    
            (function(){
                // Global slider's DOM elements
                var $example = $('#example'),
                    $parent = $('.mightyslider_modern_skin', $example),
                    $tabs = $('.tabs ul', $example),
                    $frame = $('.frame', $example);
    
                // Calling mightySlider via jQuery proxy
                $frame.mightySlider({
                    speed: 1000,
                    autoScale: 'easeOutExpo',
                    easing: 'easeOutExpo',
                    
                    // Navigation options
                    navigation: {
                        slideSize: '100%'
                    },
    
                    // Thumbnails options
                    thumbnails: {
                        horizontal: 0,
                        preloadThumbnails: 0,
                        activateOn: clickEvent,
                        thumbnailsBar: $tabs,
                        thumbnailBuilder:
                            function (index, thumbnail) {
                                return '<li><h3>' + this.slides[index].options.title + '</h3>by ' + this.slides[index].options.owner + '</li>';
                            }
                    },
    
                    // Commands options
                    commands: {
                        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.
    <div id="example">
        <div>
            <div class="tabs">
                <ul></ul>
            </div>
        </div>
        <!-- PARENT -->
        <div class="mightyslider_modern_skin">
            <div class="frame" data-mightyslider="
                width: 871,
                height: 490
            ">
                <!-- SLIDEELEMENT -->
                <div class="slide_element">
                    <div class="slide" data-mightyslider="
                        video: 'http://vimeo.com/67714341',
                        owner: 'Sebastian Linda',
                        title: 'Dresden Elbe Hochwasser - 5 Juni 2013'
                    ">
                        <div class="mSCaption caption caption1" data-msanimation="{
                            speed: 300,
                            style: { top: 370, opacity: 1 }
                        }">
                        You can use direct video url<br>for full-sized videos & covers
                        </div>
                    </div>
                    <div class="slide" data-mightyslider="
                        cover: 'assets/img/photos/70245817_1280.jpg',
                        mp4: 'http://mightyslider.com/video/25627414.mp4',
                        webm: 'http://mightyslider.com/video/25627414.webm',
                        videoFrame: 'src/videoframes/mediaelementjs.php',
                        owner: 'Colin Hesterly',
                        title: 'The Empire'
                    ">
                        <div class="mSCaption caption caption2" data-msanimation="{
                            speed: 300,
                            style: { top: 370, opacity: 1 }
                        }">
                        HTML5 VIDEO          custom video player
                        </div>
                        <div class="mSCaption caption caption3" data-msanimation="{
                            delay: 300,
                            speed: 300,
                            style: { width: 80, height: 80, top: 355, left: 344, fontSize: 76, opacity: 1 }
                        }">
                        &
                        </div>
                    </div>
                    <div class="slide" data-mightyslider="
                        video: 'http://vimeo.com/62855297',
                        owner: 'GOBELINS pro',
                        title: 'Eclipse',
                        skin: 'black'
                    "></div>
                    <div class="slide" data-mightyslider="
                        video: 'http://vimeo.com/14773535',
                        owner: 'Colin Hesterly',
                        title: 'World Of Motion'
                    "></div>
                    <div class="slide" data-mightyslider="
                        video: 'http://vimeo.com/64504343',
                        owner: 'Sebastian Linda', title: '60 Minutes in a Skateboarder´s Life'
                    "></div>
                    <div class="slide" data-mightyslider="
                        video: 'http://vimeo.com/69445362',
                        owner: 'Simon Christen', title: 'Adrift'
                    "></div>
                    <div class="slide" data-mightyslider="
                        video: 'http://vimeo.com/41709203',
                        owner: 'Sebastian Linda',
                        title: 'Battle of germany´s best B-boy´s - Red Bull Bc One Cypher Germany 2012'
                    "></div>
                </div>
                <!-- END OF SLIDEELEMENT -->
            </div>
            <!-- END OF FRAME -->
        </div>
        <!-- END OF PARENT -->
    </div>
    
    You need to put the following styles just before the </head>
    <style>
        #example {
            position: relative;
            background: #000;
        }
        #example .mightyslider_modern_skin {
            margin-right: 299px;
        }
        #example .frame {
            width: 100%;
            height: 500px;
        }
        #example .frame .slide_element {
            height: 100%;
        }
        #example .frame .slide_element > div {
            float: left;
            height: 100%;
        }
        #example .frame .mSCover img {
            max-width: none;
        }
        #example .tabs {
            position: absolute;
            width: 299px;
            height: 100%;
            right: 0;
            background: #2E2E2E;
        }
        #example .tabs ul {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #example .tabs ul li {
            background: #2E2E2E;
            width: 100%;
            cursor: pointer;
            padding: 15px 10px;
            border-bottom: #333 1px solid;
            color: #5a5a5a;
            font-weight: 300;
            font-size: 12px;
            
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
    
            -webkit-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
               -moz-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                -ms-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                 -o-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                    transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
        }
        #example .tabs ul li:last-of-type {
            border-bottom: 0;
        }
        #example .tabs ul li h3 {
            font-size: 18px;
            line-height: 18px;
            font-weight: 400;
            margin: 0;
            margin-bottom: 10px;
        }
        #example .tabs ul li:hover {
            background: #000;
            color: #999;
        }
        #example .tabs ul li:hover h3 {
            color: #FFF;
        }
        #example .tabs ul li.active {
            background: #080;
            color: #FFF;
        }
        #example .caption {
            font-size: 26px;
            line-height: normal;
            font-weight: 300;
            text-shadow:0px 0px 0 rgb(208,208,208), 1px 1px 0 rgb(170,170,170),2px 2px 1px rgba(0,0,0,0.05),2px 2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);
            color: #FFF;
            opacity: 0;
            letter-spacing: -1px;
            white-space: nowrap;
            text-align: center;
            z-index: 1002;
            text-transform: uppercase;
            text-align: center;
        }
        #example .caption1 {
            font-size: 20px;
            top: 390px;
            left: 80px;
            text-shadow: rgba(0,0,0,0.7) 0 1px 0px;
            text-align: left;
            word-spacing: 4px;
            line-height: 100%;
        }
        #example .caption2 {
            top: 390px;
            left: 180px;
            background: rgba(0,0,0,0.4);
            padding: 10px 20px;
            border-radius: 100px;
        }
        #example .caption3 {
            width: 166px;
            height: 166px;
            line-height: normal;
            font-size: 166px;
            font-family: Times;
            top: 300px;
            left: 300px;
        }
        
        /* Responsive Improvements */
        @media (min-width: 980px) and (max-width: 1199px) {
            #example .mightyslider_modern_skin {
                margin-right: 239px;
            }
            #example .tabs {
                width: 239px;
            }
            #example .tabs ul li h3 {
                font-size: 14px;
                line-height: 14px;
            }
        }
        
        @media (max-width: 979px) {
            #example .mightyslider_modern_skin {
                margin-right: 182px;
            }
            #example .tabs {
                width: 182px;
            }
            #example .tabs ul li h3 {
                font-size: 11px;
                line-height: 11px;
            }
        }
        
        @media (max-width: 767px) {
            .marketing2  {
                margin-left: -20px;
                margin-right: -20px;
            }
        }
        
        @media (max-width: 480px) {
            #example .mightyslider_modern_skin {
                margin-right: 0;
            }
            #example .tabs {
                display: none;
            }
        }
    </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 {
                position: relative;
                background: #000;
            }
            #example .mightyslider_modern_skin {
                margin-right: 299px;
            }
            #example .frame {
                width: 100%;
                height: 500px;
            }
            #example .frame .slide_element {
                height: 100%;
            }
            #example .frame .slide_element > div {
                float: left;
                height: 100%;
            }
            #example .frame .mSCover img {
                max-width: none;
            }
            #example .tabs {
                position: absolute;
                width: 299px;
                height: 100%;
                right: 0;
                background: #2E2E2E;
            }
            #example .tabs ul {
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #example .tabs ul li {
                background: #2E2E2E;
                width: 100%;
                cursor: pointer;
                padding: 15px 10px;
                border-bottom: #333 1px solid;
                color: #5a5a5a;
                font-weight: 300;
                font-size: 12px;
                
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box;
    
                -webkit-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                   -moz-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                    -ms-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                     -o-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                        transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
            }
            #example .tabs ul li:last-of-type {
                border-bottom: 0;
            }
            #example .tabs ul li h3 {
                font-size: 18px;
                line-height: 18px;
                font-weight: 400;
                margin: 0;
                margin-bottom: 10px;
            }
            #example .tabs ul li:hover {
                background: #000;
                color: #999;
            }
            #example .tabs ul li:hover h3 {
                color: #FFF;
            }
            #example .tabs ul li.active {
                background: #080;
                color: #FFF;
            }
            #example .caption {
                font-size: 26px;
                line-height: normal;
                font-weight: 300;
                text-shadow:0px 0px 0 rgb(208,208,208), 1px 1px 0 rgb(170,170,170),2px 2px 1px rgba(0,0,0,0.05),2px 2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);
                color: #FFF;
                opacity: 0;
                letter-spacing: -1px;
                white-space: nowrap;
                text-align: center;
                z-index: 1002;
                text-transform: uppercase;
                text-align: center;
            }
            #example .caption1 {
                font-size: 20px;
                top: 390px;
                left: 80px;
                text-shadow: rgba(0,0,0,0.7) 0 1px 0px;
                text-align: left;
                word-spacing: 4px;
                line-height: 100%;
            }
            #example .caption2 {
                top: 390px;
                left: 180px;
                background: rgba(0,0,0,0.4);
                padding: 10px 20px;
                border-radius: 100px;
            }
            #example .caption3 {
                width: 166px;
                height: 166px;
                line-height: normal;
                font-size: 166px;
                font-family: Times;
                top: 300px;
                left: 300px;
            }
            
            /* Responsive Improvements */
            @media (min-width: 980px) and (max-width: 1199px) {
                #example .mightyslider_modern_skin {
                    margin-right: 239px;
                }
                #example .tabs {
                    width: 239px;
                }
                #example .tabs ul li h3 {
                    font-size: 14px;
                    line-height: 14px;
                }
            }
            
            @media (max-width: 979px) {
                #example .mightyslider_modern_skin {
                    margin-right: 182px;
                }
                #example .tabs {
                    width: 182px;
                }
                #example .tabs ul li h3 {
                    font-size: 11px;
                    line-height: 11px;
                }
            }
            
            @media (max-width: 767px) {
                .marketing2  {
                    margin-left: -20px;
                    margin-right: -20px;
                }
            }
            
            @media (max-width: 480px) {
                #example .mightyslider_modern_skin {
                    margin-right: 0;
                }
                #example .tabs {
                    display: none;
                }
            }
        </style>
    </head>
    <body>
    
        <div id="example">
            <div>
                <div class="tabs">
                    <ul></ul>
                </div>
            </div>
            <!-- PARENT -->
            <div class="mightyslider_modern_skin">
                <div class="frame" data-mightyslider="
                    width: 871,
                    height: 490
                ">
                    <!-- SLIDEELEMENT -->
                    <div class="slide_element">
                        <div class="slide" data-mightyslider="
                            video: 'http://vimeo.com/67714341',
                            owner: 'Sebastian Linda',
                            title: 'Dresden Elbe Hochwasser - 5 Juni 2013'
                        ">
                            <div class="mSCaption caption caption1" data-msanimation="{
                                speed: 300,
                                style: { top: 370, opacity: 1 }
                            }">
                            You can use direct video url<br>for full-sized videos & covers
                            </div>
                        </div>
                        <div class="slide" data-mightyslider="
                            cover: 'assets/img/photos/70245817_1280.jpg',
                            mp4: 'http://mightyslider.com/video/25627414.mp4',
                            webm: 'http://mightyslider.com/video/25627414.webm',
                            videoFrame: 'src/videoframes/mediaelementjs.php',
                            owner: 'Colin Hesterly',
                            title: 'The Empire'
                        ">
                            <div class="mSCaption caption caption2" data-msanimation="{
                                speed: 300,
                                style: { top: 370, opacity: 1 }
                            }">
                            HTML5 VIDEO          custom video player
                            </div>
                            <div class="mSCaption caption caption3" data-msanimation="{
                                delay: 300,
                                speed: 300,
                                style: { width: 80, height: 80, top: 355, left: 344, fontSize: 76, opacity: 1 }
                            }">
                            &
                            </div>
                        </div>
                        <div class="slide" data-mightyslider="
                            video: 'http://vimeo.com/62855297',
                            owner: 'GOBELINS pro',
                            title: 'Eclipse',
                            skin: 'black'
                        "></div>
                        <div class="slide" data-mightyslider="
                            video: 'http://vimeo.com/14773535',
                            owner: 'Colin Hesterly',
                            title: 'World Of Motion'
                        "></div>
                        <div class="slide" data-mightyslider="
                            video: 'http://vimeo.com/64504343',
                            owner: 'Sebastian Linda', title: '60 Minutes in a Skateboarder´s Life'
                        "></div>
                        <div class="slide" data-mightyslider="
                            video: 'http://vimeo.com/69445362',
                            owner: 'Simon Christen', title: 'Adrift'
                        "></div>
                        <div class="slide" data-mightyslider="
                            video: 'http://vimeo.com/41709203',
                            owner: 'Sebastian Linda',
                            title: 'Battle of germany´s best B-boy´s - Red Bull Bc One Cypher Germany 2012'
                        "></div>
                    </div>
                    <!-- END OF SLIDEELEMENT -->
                </div>
                <!-- END OF FRAME -->
            </div>
            <!-- END OF PARENT -->
        </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>
        <!-- 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>
    
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                var isTouch = !!('ontouchstart' in window),
                    clickEvent = isTouch ? 'tap' : 'click';
    
                (function(){
                    // Global slider's DOM elements
                    var $example = $('#example'),
                        $parent = $('.mightyslider_modern_skin', $example),
                        $tabs = $('.tabs ul', $example),
                        $frame = $('.frame', $example);
    
                    // Calling mightySlider via jQuery proxy
                    $frame.mightySlider({
                        speed: 1000,
                        autoScale: 'easeOutExpo',
                        easing: 'easeOutExpo',
                        
                        // Navigation options
                        navigation: {
                            slideSize: '100%'
                        },
    
                        // Thumbnails options
                        thumbnails: {
                            horizontal: 0,
                            preloadThumbnails: 0,
                            activateOn: clickEvent,
                            thumbnailsBar: $tabs,
                            thumbnailBuilder:
                                function (index, thumbnail) {
                                    return '<li><h3>' + this.slides[index].options.title + '</h3>by ' + this.slides[index].options.owner + '</li>';
                                }
                        },
    
                        // Commands options
                        commands: {
                            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>