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

    This template 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/

    Code View

    You need to put the following scripts just before the <⁄body>
    <script type="text/javascript">
        /**
         * Return value from percent of a number.
         *
         * @param {Number} percent
         * @param {Number} total
         *
         * @return {Number}
         */
        function percentToValue(percent, total) {
            return parseInt((total / 100) * percent);
        }
    
        /**
         * Convert degree to radian
         *
         * @param {Number}   degree
         *
         * @return {Number}
         */
        function degreeToRadian(degree) {
            return ((degree - 90) * Math.PI) / 180;
        }
    
        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),
                    $slides = $('.slide_element', $frame).children(),
                    $thumbnailsBar = $('div#thumbnails ul', $example),
                    $timerEL = $('canvas', $example),
                    ctx = $timerEL[0] && $timerEL[0].getContext("2d"),
                    slideSize = '70%',
                    lastIndex = -1;
    
                /**
                 * Draw arc on canvas element
                 *
                 * @param {Number}   angle
                 *
                 * @return {Void}
                 */
                function drawArc(angle) {
                    var startingAngle = degreeToRadian(0),
                        endingAngle = degreeToRadian(angle),
                        size = 160,
                        center = size / 2;
    
                    //360Bar
                    ctx.clearRect(0, 0, size, size);
                    ctx.beginPath();
                    ctx.arc(center, center, center-4, startingAngle, endingAngle, false);
                    ctx.lineWidth = 8;
                    ctx.strokeStyle = "#aaa";
                    ctx.lineCap = "round";
                    ctx.stroke();
                    ctx.closePath();
                }
    
                // Calling mightySlider via jQuery proxy
                $frame.mightySlider({
                    speed: 1500,
                    startAt: 2,
                    autoScale: 1,
                    easing: 'easeOutExpo',
                    
                    // Navigation options
                    navigation: {
                        slideSize: slideSize,
                        keyboardNavBy: 'slides',
                        activateOn: clickEvent
                    },
    
                    // Thumbnails options
                    thumbnails: {
                        thumbnailsBar: $thumbnailsBar,
                        thumbnailNav: 'forceCentered',
                        activateOn: clickEvent,
                        scrollBy: 0
                    },
    
                    // Dragging options
                    dragging: {
                        mouseDragging: 0,
                        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) {
                        if (lastIndex !== index) {
                            // Hide the timer
                            $timerEL.stop().css({ opacity: 0 });
    
                            // Remove next and previous classes from the slides
                            $slides.removeClass('next_1 next_2 prev_1 prev_2');
    
                            // Detect next and prev slides
                            var next1 = this.slides[index + 1],
                                next2 = this.slides[index + 2],
                                prev1 = this.slides[index - 1],
                                prev2 = this.slides[index - 2];
    
                            // Add next and previous classes to the slides
                            next1 && $(next1.element).addClass('next_1');
                            next2 && $(next2.element).addClass('next_2');
                            prev1 && $(prev1.element).addClass('prev_1');
                            prev2 && $(prev2.element).addClass('prev_2');
                        }
    
                        lastIndex = index;
                    },
    
                    // Register mightySlider :moveEnd event callback
                    moveEnd: function() {
                        // Reset cycling progress time elapsed
                        this.progressElapsed = 0;
                        // Fade in the timer
                        $timerEL.animate({ opacity: 1 }, 800);
                    },
    
                    // Register mightySlider :progress event callback
                    progress: function(name, progress) {
                        // Draw circle bar timer based on progress
                        drawArc(360 - (360 / 1 * progress));
                    },
    
                    // Register mightySlider :initialize and :resize event callback
                    'initialize resize': function(name) {
                        var self = this,
                            frameSize = self.relative.frameSize,
                            slideSizePixel = percentToValue(slideSize.replace('%', ''), frameSize),
                            remainedSpace = (frameSize - slideSizePixel),
                            margin = (slideSizePixel - remainedSpace / 3) / 2;
    
                        // Sets slides margin
                        $slides.css('margin', '0 -' + margin + 'px');
                        // Reload immediate
                        self.reload(1);
                    }
                });
            })();
        });
    </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: 'assets/img/photos/MS-test-day-27898.jpg',
                    thumbnail: 'assets/img/photos/MS-test-day-27898_thumb.jpg'
                "></div>
                <div class="slide prev_1" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-27771.jpg',
                    thumbnail: 'MS-test-day-27771_thumb.jpg'
                "></div>
                <div class="slide active" data-mightyslider="
                    cover: '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: 'assets/img/photos/MS-test-day-27780.jpg',
                    thumbnail: 'MS-test-day-27780_thumb.jpg'
                "></div>
                <div class="slide next_2" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-27749.jpg',
                    thumbnail: 'MS-test-day-27749_thumb.jpg'
                "></div>
                <div class="slide" data-mightyslider="
                    cover: 'assets/img/photos/MS-test-day-278081.jpg',
                    thumbnail: 'MS-test-day-278081_thumb.jpg'
                "></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 TIMER -->
        <canvas id="progress" width="160" height="160"></canvas>
        <!-- END OF SLIDER TIMER -->
        <!-- THUMBNAILS -->
        <div id="thumbnails">
            <div>
                <ul></ul>
            </div>
        </div>
        <!-- END OF THUMBNAILS -->
    </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: 30px;
        }
        #example .frame .slide_element {
            height: 100%;
        }
        #example .frame .slide_element .slide {
            float: left;
            height: 100%;
            margin: 0 -350px;
            opacity: 0;
            background: #000;
            z-index: 5;
            border-radius: 10px;
    
            -webkit-transform: scale(0.7);
            transform: scale(0.7);
    
            -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
            -webkit-transition-property: opacity, -webkit-transform;
            transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
            transition-property: opacity, transform;
        }
        #example .frame .slide_element .slide.next_1,
        #example .frame .slide_element .slide.prev_1 {
            opacity: 0.7;
            z-index: 9;
    
            -webkit-transform: scale(0.9);
            transform: scale(0.9);
        }
        #example .frame .slide_element .slide.next_2,
        #example .frame .slide_element .slide.prev_2 {
            opacity: 0.4;
            z-index: 8;
    
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
        }
        #example .frame .slide_element .slide.active {
            opacity: 1;
            z-index: 10;
    
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        #example #progress {
            position: absolute;
            border-radius: 50%;
            margin: auto;
            bottom: -40px;
            left: 0;
            right: 0;
    
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }
        #example #thumbnails {
            display: block;
            text-align: center;
            height: 80px;
        }
        #example #thumbnails > div {
            height: 100%;
            width: 100%;
        }
        #example #thumbnails > div > ul {
            list-style: none;
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #example #thumbnails > div > ul > li {
            width: 80px;
            height: 80px;
            margin: 0 5px;
            cursor: pointer;
            padding: 3px;
            border: 4px transparent solid;
            border-radius: 50%;
            opacity: 0.6;
        }
        #example #thumbnails > div > ul > li img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        #example #thumbnails > div > ul > li.active {
            opacity: 1;
        }
        #example .mSButtons.mSPrev {
            left: 15%;
            right: auto;
            bottom: 30px;
        }
        #example .mSButtons.mSNext {
            right: 15%;
            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;
        }
    </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: 30px;
            }
            #example .frame .slide_element {
                height: 100%;
            }
            #example .frame .slide_element .slide {
                float: left;
                height: 100%;
                margin: 0 -350px;
                opacity: 0;
                background: #000;
                z-index: 5;
                border-radius: 10px;
    
                -webkit-transform: scale(0.7);
                transform: scale(0.7);
    
                -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                -webkit-transition-property: opacity, -webkit-transform;
                transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
                transition-property: opacity, transform;
            }
            #example .frame .slide_element .slide.next_1,
            #example .frame .slide_element .slide.prev_1 {
                opacity: 0.7;
                z-index: 9;
    
                -webkit-transform: scale(0.9);
                transform: scale(0.9);
            }
            #example .frame .slide_element .slide.next_2,
            #example .frame .slide_element .slide.prev_2 {
                opacity: 0.4;
                z-index: 8;
    
                -webkit-transform: scale(0.8);
                transform: scale(0.8);
            }
            #example .frame .slide_element .slide.active {
                opacity: 1;
                z-index: 10;
    
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            #example #progress {
                position: absolute;
                border-radius: 50%;
                margin: auto;
                bottom: -40px;
                left: 0;
                right: 0;
    
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
            }
            #example #thumbnails {
                display: block;
                text-align: center;
                height: 80px;
            }
            #example #thumbnails > div {
                height: 100%;
                width: 100%;
            }
            #example #thumbnails > div > ul {
                list-style: none;
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #example #thumbnails > div > ul > li {
                width: 80px;
                height: 80px;
                margin: 0 5px;
                cursor: pointer;
                padding: 3px;
                border: 4px transparent solid;
                border-radius: 50%;
                opacity: 0.6;
            }
            #example #thumbnails > div > ul > li img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            #example #thumbnails > div > ul > li.active {
                opacity: 1;
            }
            #example .mSButtons.mSPrev {
                left: 15%;
                right: auto;
                bottom: 30px;
            }
            #example .mSButtons.mSNext {
                right: 15%;
                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;
            }
        </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: 'assets/img/photos/MS-test-day-27898.jpg',
                        thumbnail: 'assets/img/photos/MS-test-day-27898_thumb.jpg'
                    "></div>
                    <div class="slide prev_1" data-mightyslider="
                        cover: 'assets/img/photos/MS-test-day-27771.jpg',
                        thumbnail: 'MS-test-day-27771_thumb.jpg'
                    "></div>
                    <div class="slide active" data-mightyslider="
                        cover: '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: 'assets/img/photos/MS-test-day-27780.jpg',
                        thumbnail: 'MS-test-day-27780_thumb.jpg'
                    "></div>
                    <div class="slide next_2" data-mightyslider="
                        cover: 'assets/img/photos/MS-test-day-27749.jpg',
                        thumbnail: 'MS-test-day-27749_thumb.jpg'
                    "></div>
                    <div class="slide" data-mightyslider="
                        cover: 'assets/img/photos/MS-test-day-278081.jpg',
                        thumbnail: 'MS-test-day-278081_thumb.jpg'
                    "></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 TIMER -->
            <canvas id="progress" width="160" height="160"></canvas>
            <!-- END OF SLIDER TIMER -->
            <!-- THUMBNAILS -->
            <div id="thumbnails">
                <div>
                    <ul></ul>
                </div>
            </div>
            <!-- END OF THUMBNAILS -->
        </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">
            /**
             * Return value from percent of a number.
             *
             * @param {Number} percent
             * @param {Number} total
             *
             * @return {Number}
             */
            function percentToValue(percent, total) {
                return parseInt((total / 100) * percent);
            }
    
            /**
             * Convert degree to radian
             *
             * @param {Number}   degree
             *
             * @return {Number}
             */
            function degreeToRadian(degree) {
                return ((degree - 90) * Math.PI) / 180;
            }
    
            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),
                        $slides = $('.slide_element', $frame).children(),
                        $thumbnailsBar = $('div#thumbnails ul', $example),
                        $timerEL = $('canvas', $example),
                        ctx = $timerEL[0] && $timerEL[0].getContext("2d"),
                        slideSize = '70%',
                        lastIndex = -1;
    
                    /**
                     * Draw arc on canvas element
                     *
                     * @param {Number}   angle
                     *
                     * @return {Void}
                     */
                    function drawArc(angle) {
                        var startingAngle = degreeToRadian(0),
                            endingAngle = degreeToRadian(angle),
                            size = 160,
                            center = size / 2;
    
                        //360Bar
                        ctx.clearRect(0, 0, size, size);
                        ctx.beginPath();
                        ctx.arc(center, center, center-4, startingAngle, endingAngle, false);
                        ctx.lineWidth = 8;
                        ctx.strokeStyle = "#aaa";
                        ctx.lineCap = "round";
                        ctx.stroke();
                        ctx.closePath();
                    }
    
                    // Calling mightySlider via jQuery proxy
                    $frame.mightySlider({
                        speed: 1500,
                        startAt: 2,
                        autoScale: 1,
                        easing: 'easeOutExpo',
                        
                        // Navigation options
                        navigation: {
                            slideSize: slideSize,
                            keyboardNavBy: 'slides',
                            activateOn: clickEvent
                        },
    
                        // Thumbnails options
                        thumbnails: {
                            thumbnailsBar: $thumbnailsBar,
                            thumbnailNav: 'forceCentered',
                            activateOn: clickEvent,
                            scrollBy: 0
                        },
    
                        // Dragging options
                        dragging: {
                            mouseDragging: 0,
                            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) {
                            if (lastIndex !== index) {
                                // Hide the timer
                                $timerEL.stop().css({ opacity: 0 });
    
                                // Remove next and previous classes from the slides
                                $slides.removeClass('next_1 next_2 prev_1 prev_2');
    
                                // Detect next and prev slides
                                var next1 = this.slides[index + 1],
                                    next2 = this.slides[index + 2],
                                    prev1 = this.slides[index - 1],
                                    prev2 = this.slides[index - 2];
    
                                // Add next and previous classes to the slides
                                next1 && $(next1.element).addClass('next_1');
                                next2 && $(next2.element).addClass('next_2');
                                prev1 && $(prev1.element).addClass('prev_1');
                                prev2 && $(prev2.element).addClass('prev_2');
                            }
    
                            lastIndex = index;
                        },
    
                        // Register mightySlider :moveEnd event callback
                        moveEnd: function() {
                            // Reset cycling progress time elapsed
                            this.progressElapsed = 0;
                            // Fade in the timer
                            $timerEL.animate({ opacity: 1 }, 800);
                        },
    
                        // Register mightySlider :progress event callback
                        progress: function(name, progress) {
                            // Draw circle bar timer based on progress
                            drawArc(360 - (360 / 1 * progress));
                        },
    
                        // Register mightySlider :initialize and :resize event callback
                        'initialize resize': function(name) {
                            var self = this,
                                frameSize = self.relative.frameSize,
                                slideSizePixel = percentToValue(slideSize.replace('%', ''), frameSize),
                                remainedSpace = (frameSize - slideSizePixel),
                                margin = (slideSizePixel - remainedSpace / 3) / 2;
    
                            // Sets slides margin
                            $slides.css('margin', '0 -' + margin + 'px');
                            // Reload immediate
                            self.reload(1);
                        }
                    });
                })();
            });
        </script>
    </body>
    </html>