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

This template shows one complete slide plus two 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.

3D navigation works perfectly in modern browsers and in others it gets back to 2D mode.

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

Code View

You need to put the following scripts just before the <⁄body>
<script type="text/javascript">
    /**
     * Get viewport/window size (width and height).
     *
     * @return {Object}
     */
    function getViewport() {
        var e = window,
            a = 'inner';
        if (!('innerWidth' in window)) {
            a = 'client';
            e = document.documentElement || document.body;
        }
        return {
            width: e[a + 'Width'],
            height: e[a + 'Height']
        }
    }

    jQuery(document).ready(function($) {
        var $win = $(window),
            isTouch = !!('ontouchstart' in window),
            clickEvent = isTouch ? 'tap' : 'click';

        (function(){
            /**
             * Calculate the slides width in percent based on the parent's width.
             *
             * @return {String}
             */
            function calculator(width){
                var percent = '50%';

                if (width <= 480) {
                    percent = '60%';
                }
                else if (width <= 767) {
                    percent = '55%';
                }

                return percent;
            };

            // Global slider's DOM elements
            var $example = $('#example'),
                $frame = $('.frame', $example),
                $details = $('div.details', $example),
                $title = $('#title', $details),
                $photographer = $('#photographer', $details),
                $description = $('#description', $details),
                lastIndex = -1;

            // Calling new mightySlider class
            var slider = new mightySlider($frame, {
                speed: 1000,
                startAt: 1,
                autoScale: 1,
                easing: 'easeOutExpo',
                
                // Navigation options
                navigation: {
                    slideSize: calculator(getViewport().width),
                    keyboardNavBy: 'slides',
                    activateOn: clickEvent
                },

                // Dragging options
                dragging: {
                    swingSpeed: 0.12,
                    onePage: 1
                },

                // Buttons options
                buttons: !isTouch ? {
                    prev: $('a.mSPrev', $frame),
                    next: $('a.mSNext', $frame)
                } : {},

                // Cycling options
                cycling: {
                    cycleBy: 'slides'
                }
            },

            // Register callbacks to the events
            {
                // Register mightySlider :active event callback
                active: function(name, index) {
                    var slideOptions = this.slides[index].options;

                    if (lastIndex !== index)
                        $details.stop().animate({ opacity: 0 }, 500, function(){
                            $title.html(slideOptions.title);
                            $photographer.html(slideOptions.photographer);
                            $description.html(slideOptions.description);
                            $details.animate({ opacity: 1 }, 500);
                        });

                    lastIndex = index;
                }
            }).init();

            // Register window :resize event callback
            $win.resize(function(){
                // Update slider options using 'set' method
                slider.set({
                    navigation: {
                        slideSize: calculator(getViewport().width)
                    }
                });
            });
        })();
    });
</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" data-mightyslider="
                cover: 'assets/img/photos/MS-test-day-27898.jpg',
                title: 'Neque porro quisquam est qui',
                photographer: 'MARCUS ERIKSSON',
                description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.'
            "></div>
            <div class="slide active" data-mightyslider="
                cover: 'assets/img/photos/MS-test-day-27771.jpg',
                title: 'Integer viverra felis a nisl volutpat placerat',
                photographer: 'MARCUS ERIKSSON',
                description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.'
            "></div>
            <div class="slide" data-mightyslider="
                cover: 'assets/img/photos/MS-test-day-27845.jpg',
                video: 'http://vimeo.com/32685545',
                title: 'Donec dignissim est ut ligula',
                photographer: 'MARCUS ERIKSSON',
                description: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.'
            ">
                <!-- LAYER -->
                <div class="mSCaption">
                    You can use direct video url<br />for full-sized videos & covers
                </div>
            </div>
            <div class="slide" data-mightyslider="
                cover: 'assets/img/photos/MS-test-day-27780.jpg',
                title: 'Neque porro quisquam est qui',
                photographer: 'MARCUS ERIKSSON',
                description: 'Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.'
            "></div>
            <div class="slide" data-mightyslider="
                cover: 'assets/img/photos/MS-test-day-27749.jpg',
                title: 'Integer viverra felis a nisl volutpat placera',
                photographer: 'MARCUS ERIKSSON',
                description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.'
            "></div>
            <div class="slide" data-mightyslider="
                cover: 'assets/img/photos/MS-test-day-278081.jpg',
                title: 'Donec dignissim est ut ligula',
                photographer: 'MARCUS ERIKSSON',
                description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.'
            "></div>
            <!-- END OF SLIDES -->
        </div>
        <!-- END OF SLIDEELEMENT -->
        <!-- ARROW BUTTONS -->
        <a class="mSButtons mSPrev"></a>
        <a class="mSButtons mSNext"></a>
    </div>
    <!-- END OF FRAME -->
    <!-- SLIDER DETAILS (TITLE, PHOTOGRAPHER AND DESCRIPTION) -->
    <div class="details">
        <h3 id="title"></h3>
        <h4 id="photographer"></h4>
        <p id="description"></p>
    </div>
</div>
<!-- END OF PARENT -->
You need to put the following styles just before the </head>
<style>
    #example {
        position: relative;
        overflow: hidden;
        margin-top: 61px;
        background: transparent;
    }
    #example .frame {
        position: relative;
        width: 100%;
        padding: 20px 0;
        padding-bottom: 50px;

        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }
    #example .frame .slide_element {
        height: 100%;

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    #example .frame .slide_element .slide {
        float: left;
        height: 100%;
        margin-right: 20px;
        opacity: 0.6;
        background: #000;
        z-index: 9;
        border-radius: 10px;

        -webkit-box-reflect: below 0 -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.9, transparent), to(rgba(255, 255, 255, 0.498039)));

        -webkit-transform: rotateY(45deg);
        transform: rotateY(45deg);
        -ms-transform: perspective(1000px) rotateY(25deg);

        -webkit-transition: -webkit-transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        -webkit-transition-property: opacity, -webkit-transform;
        transition: transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition-property: opacity, transform;
    }
    #example .frame .slide_element .slide.active {
        opacity: 1;
        z-index: 10;

        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    #example .frame .slide_element .slide.active ~ .slide {
        -webkit-transform: rotateY(-45deg);
        transform: rotateY(-45deg);
        -ms-transform: perspective(1000px) rotateY(-25deg);
    }
    #example .details {
        display: block;
        text-align: center;
        padding: 20px;
        padding-top: 0;
        opacity: 0;
        min-height: 114px;
        margin-top: -20px;
    }
    #example .details h3 {
        text-transform: uppercase;
        font-size: 32px;
        font-weight: 300;
        margin: 0;
    }
    #example .details h4#photographer {
        text-transform: uppercase;
        color: #7A7A7A;
    }
    #example .details #description {
        color: #3D3D3D;
    }
    #example .mSButtons.mSPrev {
        left: 25%;
        right: auto;
        bottom: 30px;
    }
    #example .mSButtons.mSNext {
        right: 25%;
        left: auto;
        bottom: 30px;
    }
    #example.isTouch .mSButtons {
        display: none;
    }
    #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;
    }


    /* Responsive Improvements */
    @media (max-width: 1200px) {
        #example .frame .slide_element .slide {
            margin-right: 0;
        }
    }
    @media (max-width: 979px) {
        #example .frame .slide_element .slide {
            margin-right: -10px;
        }
    }
    @media (max-width: 767px) {
        #example .frame .slide_element .slide {
            margin-right: -40px;
            -webkit-transform: scale(0.8) rotateY(45deg);
            transform: scale(0.8) rotateY(45deg);
            -ms-transform: perspective(1000px) scale(0.8) rotateY(25deg);
        }
        #example .frame .slide_element .slide.active {
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }
        #example .frame .slide_element .slide.active ~ .slide {
            -webkit-transform: scale(0.8) rotateY(-45deg);
            transform: scale(0.8) rotateY(-45deg);
            -ms-transform: perspective(1000px) scale(0.8) rotateY(-25deg);
        }
    }
    @media (max-width: 480px) {
        #example .frame .slide_element .slide {
            margin-right: -40px;
            -webkit-transform: scale(0.7) rotateY(45deg);
            transform: scale(0.7) rotateY(45deg);
            -ms-transform: perspective(1000px) scale(0.7) rotateY(25deg);
        }
        #example .frame .slide_element .slide.active {
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }
        #example .frame .slide_element .slide.active ~ .slide {
            -webkit-transform: scale(0.7) rotateY(-45deg);
            transform: scale(0.7) rotateY(-45deg);
            -ms-transform: perspective(1000px) scale(0.7) rotateY(-25deg);
        }
    }
    @media (max-width: 320px) {
        #example .frame .slide_element .slide {
            margin-right: -30px;
        }
    }
</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;
            overflow: hidden;
            margin-top: 61px;
            background: transparent;
        }
        #example .frame {
            position: relative;
            width: 100%;
            padding: 20px 0;
            padding-bottom: 50px;

            -webkit-perspective: 1000px;
            perspective: 1000px;
            -webkit-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
        }
        #example .frame .slide_element {
            height: 100%;

            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        #example .frame .slide_element .slide {
            float: left;
            height: 100%;
            margin-right: 20px;
            opacity: 0.6;
            background: #000;
            z-index: 9;
            border-radius: 10px;

            -webkit-box-reflect: below 0 -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.9, transparent), to(rgba(255, 255, 255, 0.498039)));

            -webkit-transform: rotateY(45deg);
            transform: rotateY(45deg);
            -ms-transform: perspective(1000px) rotateY(25deg);

            -webkit-transition: -webkit-transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
            -webkit-transition-property: opacity, -webkit-transform;
            transition: transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
            transition-property: opacity, transform;
        }
        #example .frame .slide_element .slide.active {
            opacity: 1;
            z-index: 10;

            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }
        #example .frame .slide_element .slide.active ~ .slide {
            -webkit-transform: rotateY(-45deg);
            transform: rotateY(-45deg);
            -ms-transform: perspective(1000px) rotateY(-25deg);
        }
        #example .details {
            display: block;
            text-align: center;
            padding: 20px;
            padding-top: 0;
            opacity: 0;
            min-height: 114px;
            margin-top: -20px;
        }
        #example .details h3 {
            text-transform: uppercase;
            font-size: 32px;
            font-weight: 300;
            margin: 0;
        }
        #example .details h4#photographer {
            text-transform: uppercase;
            color: #7A7A7A;
        }
        #example .details #description {
            color: #3D3D3D;
        }
        #example .mSButtons.mSPrev {
            left: 25%;
            right: auto;
            bottom: 30px;
        }
        #example .mSButtons.mSNext {
            right: 25%;
            left: auto;
            bottom: 30px;
        }
        #example.isTouch .mSButtons {
            display: none;
        }
        #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;
        }


        /* Responsive Improvements */
        @media (max-width: 1200px) {
            #example .frame .slide_element .slide {
                margin-right: 0;
            }
        }
        @media (max-width: 979px) {
            #example .frame .slide_element .slide {
                margin-right: -10px;
            }
        }
        @media (max-width: 767px) {
            #example .frame .slide_element .slide {
                margin-right: -40px;
                -webkit-transform: scale(0.8) rotateY(45deg);
                transform: scale(0.8) rotateY(45deg);
                -ms-transform: perspective(1000px) scale(0.8) rotateY(25deg);
            }
            #example .frame .slide_element .slide.active {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
            #example .frame .slide_element .slide.active ~ .slide {
                -webkit-transform: scale(0.8) rotateY(-45deg);
                transform: scale(0.8) rotateY(-45deg);
                -ms-transform: perspective(1000px) scale(0.8) rotateY(-25deg);
            }
        }
        @media (max-width: 480px) {
            #example .frame .slide_element .slide {
                margin-right: -40px;
                -webkit-transform: scale(0.7) rotateY(45deg);
                transform: scale(0.7) rotateY(45deg);
                -ms-transform: perspective(1000px) scale(0.7) rotateY(25deg);
            }
            #example .frame .slide_element .slide.active {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
            #example .frame .slide_element .slide.active ~ .slide {
                -webkit-transform: scale(0.7) rotateY(-45deg);
                transform: scale(0.7) rotateY(-45deg);
                -ms-transform: perspective(1000px) scale(0.7) rotateY(-25deg);
            }
        }
        @media (max-width: 320px) {
            #example .frame .slide_element .slide {
                margin-right: -30px;
            }
        }
    </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" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-27898.jpg',
                    title: 'Neque porro quisquam est qui',
                    photographer: 'MARCUS ERIKSSON',
                    description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.'
                "></div>
                <div class="slide active" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-27771.jpg',
                    title: 'Integer viverra felis a nisl volutpat placerat',
                    photographer: 'MARCUS ERIKSSON',
                    description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.'
                "></div>
                <div class="slide" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-27845.jpg',
                    video: 'http://vimeo.com/32685545',
                    title: 'Donec dignissim est ut ligula',
                    photographer: 'MARCUS ERIKSSON',
                    description: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.'
                ">
                    <!-- LAYER -->
                    <div class="mSCaption">
                        You can use direct video url<br />for full-sized videos & covers
                    </div>
                </div>
                <div class="slide" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-27780.jpg',
                    title: 'Neque porro quisquam est qui',
                    photographer: 'MARCUS ERIKSSON',
                    description: 'Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.'
                "></div>
                <div class="slide" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-27749.jpg',
                    title: 'Integer viverra felis a nisl volutpat placera',
                    photographer: 'MARCUS ERIKSSON',
                    description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.'
                "></div>
                <div class="slide" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-278081.jpg',
                    title: 'Donec dignissim est ut ligula',
                    photographer: 'MARCUS ERIKSSON',
                    description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.'
                "></div>
                <!-- END OF SLIDES -->
            </div>
            <!-- END OF SLIDEELEMENT -->
            <!-- ARROW BUTTONS -->
            <a class="mSButtons mSPrev"></a>
            <a class="mSButtons mSNext"></a>
        </div>
        <!-- END OF FRAME -->
        <!-- SLIDER DETAILS (TITLE, PHOTOGRAPHER AND DESCRIPTION) -->
        <div class="details">
            <h3 id="title"></h3>
            <h4 id="photographer"></h4>
            <p id="description"></p>
        </div>
    </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>
    <!-- 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">
        /**
         * Get viewport/window size (width and height).
         *
         * @return {Object}
         */
        function getViewport() {
            var e = window,
                a = 'inner';
            if (!('innerWidth' in window)) {
                a = 'client';
                e = document.documentElement || document.body;
            }
            return {
                width: e[a + 'Width'],
                height: e[a + 'Height']
            }
        }

        jQuery(document).ready(function($) {
            var $win = $(window),
                isTouch = !!('ontouchstart' in window),
                clickEvent = isTouch ? 'tap' : 'click';

            (function(){
                /**
                 * Calculate the slides width in percent based on the parent's width.
                 *
                 * @return {String}
                 */
                function calculator(width){
                    var percent = '50%';

                    if (width <= 480) {
                        percent = '60%';
                    }
                    else if (width <= 767) {
                        percent = '55%';
                    }

                    return percent;
                };

                // Global slider's DOM elements
                var $example = $('#example'),
                    $frame = $('.frame', $example),
                    $details = $('div.details', $example),
                    $title = $('#title', $details),
                    $photographer = $('#photographer', $details),
                    $description = $('#description', $details),
                    lastIndex = -1;

                // Calling new mightySlider class
                var slider = new mightySlider($frame, {
                    speed: 1000,
                    startAt: 1,
                    autoScale: 1,
                    easing: 'easeOutExpo',
                    
                    // Navigation options
                    navigation: {
                        slideSize: calculator(getViewport().width),
                        keyboardNavBy: 'slides',
                        activateOn: clickEvent
                    },

                    // Dragging options
                    dragging: {
                        swingSpeed: 0.12,
                        onePage: 1
                    },

                    // Buttons options
                    buttons: !isTouch ? {
                        prev: $('a.mSPrev', $frame),
                        next: $('a.mSNext', $frame)
                    } : {},

                    // Cycling options
                    cycling: {
                        cycleBy: 'slides'
                    }
                },

                // Register callbacks to the events
                {
                    // Register mightySlider :active event callback
                    active: function(name, index) {
                        var slideOptions = this.slides[index].options;

                        if (lastIndex !== index)
                            $details.stop().animate({ opacity: 0 }, 500, function(){
                                $title.html(slideOptions.title);
                                $photographer.html(slideOptions.photographer);
                                $description.html(slideOptions.description);
                                $details.animate({ opacity: 1 }, 500);
                            });

                        lastIndex = index;
                    }
                }).init();

                // Register window :resize event callback
                $win.resize(function(){
                    // Update slider options using 'set' method
                    slider.set({
                        navigation: {
                            slideSize: calculator(getViewport().width)
                        }
                    });
                });
            })();
        });
    </script>
</body>
</html>