Loading...

Carousels

Here we show the mightySlider capability in creating carousels.

The size and amount of carousels slides will automatically adjust depending on the browser size and all skins shown here are included in download package!

  • Blossom by Christopher Wesser
  • Look by Michal Karcz
  • Coca Cola by Coca Cola
  • White Christmas by Bela Borroso
  • Upset by Danny Santos
  • Powder Winds by Oliver Oettli
  • Red Tie by bigmoneymike
  • Sunset by nicholas
  • Upset by Danny Santos
  • Look by Michal Karcz
  • Coca Cola by Coca Cola

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(){
            /**
             * Calculate the slides width in percent based on the parent's width.
             *
             * @return {String}
             */
            function calculator(width){
                var percent = '25%';

                if (width <= 480) {
                    percent = '100%';
                }
                else if (width <= 768) {
                    percent = '50%';
                }
                else if (width <= 980) {
                    percent = '33.33%';
                }

                return percent;
            };

            // Global slider's DOM elements
            var $carousel = $('#simple'),
                $pagesbar = $('.mSPages', $carousel),
                $frame = $('.frame', $carousel);

            // Calling new mightySlider class
            var slider = new mightySlider($frame, {
                speed: 1000,
                easing: 'easeOutExpo',
                viewport: 'fill',

                // Navigation options
                navigation: {
                    navigationType: 'basic',
                    slideSize: calculator($win.width())
                },

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

                // Pages options
                pages: {
                    pagesBar:       $pagesbar[0],
                    activateOn:     clickEvent
                },

                // Dragging options
                dragging: {
                    mouseDragging: 0,
                    touchDragging: 0
                }
            }).init();

            // Register window :resize event callback
            $win.resize(function(){
                // Update slider options using 'set' method
                slider.set({
                    navigation: {
                        slideSize: calculator($win.width())
                    }
                });
            });
        })();
    });
</script>
You need to put the following html markup in your html document where you want to have slider.
<!-- PARENT -->
<div class="mightyslider_carouselSimple_skin clearfix" id="simple">
    <!-- BULLETS BAR -->
    <ul class="mSPages">
    </ul>
    <!-- FRAME -->
    <div class="frame">
        <!-- SLIDEELEMENT -->
        <ul class="slide_element">
            <!-- SLIDES -->
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Blossom&lt;/strong&gt; by &lt;b&gt;Christopher Wesser&lt;/b&gt;' }">
                <div class="details">
                    <strong>Blossom</strong>
                    by <b>Christopher Wesser</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Look&lt;/strong&gt; by &lt;b&gt;Michal Karcz&lt;/b&gt;' }">
                <div class="details">
                    <strong>Look</strong>
                    by <b>Michal Karcz</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', video: 'http://vimeo.com/64116043'">
                <div class="details">
                    <strong>Coca Cola</strong>
                    by <b>Coca Cola</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;White Christmas&lt;/strong&gt; by &lt;b&gt;Bela Borroso&lt;/b&gt;' }">
                <div class="details">
                    <strong>White Christmas</strong>
                    by <b>Bela Borroso</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Upset&lt;/strong&gt; by &lt;b&gt;Danny Santos&lt;/b&gt;' }">
                <div class="details">
                    <strong>Upset</strong>
                    by <b>Danny Santos</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Powder Winds&lt;/strong&gt; by &lt;b&gt;Oliver Oettli&lt;/b&gt;' }">
                <div class="details">
                    <strong>Powder Winds</strong>
                    by <b>Oliver Oettli</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Red Tie&lt;/strong&gt; by &lt;b&gt;bigmoneymike&lt;/b&gt;' }">
                <div class="details">
                    <strong>Red Tie</strong>
                    by <b>bigmoneymike</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Sunset&lt;/strong&gt; by &lt;b&gt;nicholas&lt;/b&gt;' }">
                <div class="details">
                    <strong>Sunset</strong>
                    by <b>nicholas</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Upset&lt;/strong&gt; by &lt;b&gt;Danny Santos&lt;/b&gt;' }">
                <div class="details">
                    <strong>Upset</strong>
                    by <b>Danny Santos</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Look&lt;/strong&gt; by &lt;b&gt;Michal Karcz&lt;/b&gt;' }">
                <div class="details">
                    <strong>Look</strong>
                    by <b>Michal Karcz</b>
                </div>
            </li>
            <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Coca Cola&lt;/strong&gt; by &lt;b&gt;Coca Cola&lt;/b&gt;' }">
                <div class="details">
                    <strong>Coca Cola</strong>
                    by <b>Coca Cola</b>
                </div>
            </li>
        </ul>
    </div>
</div>
You need to put the following styles just before the </head>
<style>
    #simple .frame {
        width: 100%;
        height: 210px;
    }
    #simple .frame ul {
        list-style: none;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #simple .frame ul li {
        float: left;
        height: 160px;
        padding: 0 10px;
    }
    #simple .frame ul li img {
        max-width: none;
    }
    #simple .frame ul li .details {
        padding-top: 10px;
        font-weight: 300;
    }
    #simple .frame ul li .details strong {
        display: block;
        color: #000;
    }
    #simple .frame ul li .details b {
    }
    #simple ul.mSPages {
        float: right;
        margin-bottom: 20px;
        margin-right: 12px;
    }
    #simple .mSButtons {
        top: 91px;
        bottom: 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>
        #simple .frame {
            width: 100%;
            height: 210px;
        }
        #simple .frame ul {
            list-style: none;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #simple .frame ul li {
            float: left;
            height: 160px;
            padding: 0 10px;
        }
        #simple .frame ul li img {
            max-width: none;
        }
        #simple .frame ul li .details {
            padding-top: 10px;
            font-weight: 300;
        }
        #simple .frame ul li .details strong {
            display: block;
            color: #000;
        }
        #simple .frame ul li .details b {
        }
        #simple ul.mSPages {
            float: right;
            margin-bottom: 20px;
            margin-right: 12px;
        }
        #simple .mSButtons {
            top: 91px;
            bottom: auto;
        }
    </style>
</head>
<body>

    <!-- PARENT -->
    <div class="mightyslider_carouselSimple_skin clearfix" id="simple">
        <!-- BULLETS BAR -->
        <ul class="mSPages">
        </ul>
        <!-- FRAME -->
        <div class="frame">
            <!-- SLIDEELEMENT -->
            <ul class="slide_element">
                <!-- SLIDES -->
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/800x600/d12335/fff.png', 'data-caption': '&lt;strong&gt;Blossom&lt;/strong&gt; by &lt;b&gt;Christopher Wesser&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Blossom</strong>
                        by <b>Christopher Wesser</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/800x600/d12335/fff.png', 'data-caption': '&lt;strong&gt;Look&lt;/strong&gt; by &lt;b&gt;Michal Karcz&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Look</strong>
                        by <b>Michal Karcz</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', video: 'http://vimeo.com/64116043'">
                    <div class="details">
                        <strong>Coca Cola</strong>
                        by <b>Coca Cola</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;White Christmas&lt;/strong&gt; by &lt;b&gt;Bela Borroso&lt;/b&gt;' }">
                    <div class="details">
                        <strong>White Christmas</strong>
                        by <b>Bela Borroso</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Upset&lt;/strong&gt; by &lt;b&gt;Danny Santos&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Upset</strong>
                        by <b>Danny Santos</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Powder Winds&lt;/strong&gt; by &lt;b&gt;Oliver Oettli&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Powder Winds</strong>
                        by <b>Oliver Oettli</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Red Tie&lt;/strong&gt; by &lt;b&gt;bigmoneymike&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Red Tie</strong>
                        by <b>bigmoneymike</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Sunset&lt;/strong&gt; by &lt;b&gt;nicholas&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Sunset</strong>
                        by <b>nicholas</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Upset&lt;/strong&gt; by &lt;b&gt;Danny Santos&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Upset</strong>
                        by <b>Danny Santos</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Look&lt;/strong&gt; by &lt;b&gt;Michal Karcz&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Look</strong>
                        by <b>Michal Karcz</b>
                    </div>
                </li>
                <li class="slide" data-mightyslider="cover:'http://dummyimage.com/600x400/d12335/fff.png', link: { url: 'http://dummyimage.com/600x400/d12335/fff.png', 'data-caption': '&lt;strong&gt;Coca Cola&lt;/strong&gt; by &lt;b&gt;Coca Cola&lt;/b&gt;' }">
                    <div class="details">
                        <strong>Coca Cola</strong>
                        by <b>Coca Cola</b>
                    </div>
                </li>
            </ul>
        </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/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(){
                /**
                 * Calculate the slides width in percent based on the parent's width.
                 *
                 * @return {String}
                 */
                function calculator(width){
                    var percent = '25%';

                    if (width <= 480) {
                        percent = '100%';
                    }
                    else if (width <= 768) {
                        percent = '50%';
                    }
                    else if (width <= 980) {
                        percent = '33.33%';
                    }

                    return percent;
                };

                // Global slider's DOM elements
                var $carousel = $('#simple'),
                    $pagesbar = $('.mSPages', $carousel),
                    $frame = $('.frame', $carousel);

                // Calling new mightySlider class
                var slider = new mightySlider($frame, {
                    speed: 1000,
                    easing: 'easeOutExpo',
                    viewport: 'fill',

                    // Navigation options
                    navigation: {
                        navigationType: 'basic',
                        slideSize: calculator($win.width())
                    },

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

                    // Pages options
                    pages: {
                        pagesBar:       $pagesbar[0],
                        activateOn:     clickEvent
                    },

                    // Dragging options
                    dragging: {
                        mouseDragging: 0,
                        touchDragging: 0
                    }
                }).init();

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

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(){
            /**
             * Calculate the slides width in percent based on the parent's width.
             *
             * @return {String}
             */
            function calculator(width){
                var percent = '33.33%';

                if (width <= 768) {
                    percent = '50%';
                }

                return percent;
            };

            // Global slider's DOM elements
            var $carousel = $('#modern'),
                $frame = $('.frame', $carousel);

            // Calling new mightySlider class
            var slider = new mightySlider($frame, {
                speed: 1000,
                easing: 'easeOutExpo',
                autoScale: 1,
                viewport: 'fill',

                // Navigation options
                navigation: {
                    navigationType: 'basic',
                    activateOn: clickEvent,
                    slideSize: calculator($win.width())
                },
                
                // Buttons options
                buttons: {
                    prevPage: $('#modern_prev'),
                    nextPage: $('#modern_next')
                }
            }).init();

            // Register window :resize event callback
            $win.resize(function(){
                // Update slider options using 'set' method
                slider.set({
                    navigation: {
                        slideSize: calculator($win.width())
                    }
                });
            });
        })();
    });
</script>
You need to put the following html markup in your html document where you want to have slider.
<!-- PARENT -->
<div class="mightyslider_carouselModern_skin clearfix" id="modern">
    <!-- FRAME -->
    <div class="frame" data-mightyslider="
        width: 1170,
        height: 370
    ">
        <!-- SLIDEELEMENT -->
        <ul class="slide_element">
            <!-- SLIDES -->
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</a>
                    <div class="description">Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris. Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">156 Likes</a>
                        <a href="javascript:void(0);">27 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Integer viverra felis a nisl volutpat placerat</a>
                    <div class="description">Nullam ornare, est vel scelerisque blandit, ligula lectus facilisis lectus, eget lacinia massa ante non magna. Cras sollicitudin diam eu tempor volutpat. Fusce scelerisque metus quam, ut ultrices eros blandit ac.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">132 Likes</a>
                        <a href="javascript:void(0);">16 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                video: 'http://vimeo.com/44941805'
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                    <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">234 Likes</a>
                        <a href="javascript:void(0);">23 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</a>
                    <div class="description">Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris. Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">156 Likes</a>
                        <a href="javascript:void(0);">27 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Integer viverra felis a nisl volutpat placerat</a>
                    <div class="description">Nullam ornare, est vel scelerisque blandit, ligula lectus facilisis lectus, eget lacinia massa ante non magna. Cras sollicitudin diam eu tempor volutpat. Fusce scelerisque metus quam, ut ultrices eros blandit ac.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">132 Likes</a>
                        <a href="javascript:void(0);">16 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                    <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">234 Likes</a>
                        <a href="javascript:void(0);">23 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</a>
                    <div class="description">Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris. Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">156 Likes</a>
                        <a href="javascript:void(0);">27 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Integer viverra felis a nisl volutpat placerat</a>
                    <div class="description">Nullam ornare, est vel scelerisque blandit, ligula lectus facilisis lectus, eget lacinia massa ante non magna. Cras sollicitudin diam eu tempor volutpat. Fusce scelerisque metus quam, ut ultrices eros blandit ac.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">132 Likes</a>
                        <a href="javascript:void(0);">16 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                    <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">234 Likes</a>
                        <a href="javascript:void(0);">23 Comments</a>
                    </div>
                </div>
            </li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                link: {
                    url: 'http://dummyimage.com/800x600/d12335/fff.png'
                }
            ">
                <div class="details">
                    <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                    <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                    <div class="counts">
                        <a href="javascript:void(0);" class="more">Read more</a>
                        <a href="javascript:void(0);">234 Likes</a>
                        <a href="javascript:void(0);">23 Comments</a>
                    </div>
                </div>
            </li>
            <!-- END OF SLIDES -->
        </ul>
        <!-- END OF SLIDEELEMENT -->
    </div>
    <!-- END OF FRAME -->
</div>
<!-- END OF PARENT -->
You need to put the following styles just before the </head>
<style>
    #modern .frame {
        width: 100%;
        height: 500px;
    }
    #modern .frame ul {
        list-style: none;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #modern .frame ul li {
        float: left;
        height: 100%;
    }
    #modern .frame ul li img {
        max-width: none;
    }
    #modern .frame ul li .mSCover {
        position: relative;
    }
    #modern .frame ul li .mSCover:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0);
        
        -webkit-transition: all 0.3s;
            -ms-transition: all 0.3s;
             -o-transition: all 0.3s;
                transition: all 0.3s;
    }
    #modern .frame ul li:hover .mSCover:after {
        background-color: rgba(0, 0, 0, 0.6);
    }
    #modern.mSMedia .frame ul li:hover .mSCover:after {
        display: none;
    }
    #modern .details {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        padding: 15px;
        color: #FFF;
        
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        
        -webkit-transition: all 0.3s;
            -ms-transition: all 0.3s;
             -o-transition: all 0.3s;
                transition: all 0.3s;
    }
    #modern.mSMedia .details {
        display: none;
    }
    #modern .frame ul li:hover .details {
        background-color: rgba(0, 0, 0, 0.6);
    }
    #modern .details .title {
        display: block;
        color: #FFF;
        font-size: 18px;
        text-transform: uppercase;
        text-decoration: none;
        margin-bottom: 10px;
        text-shadow: 1px 1px 0 #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #modern .details .description {
        font-weight: 300;
        height: 0;
        overflow: hidden;
        color: #D5D5D5;
        
        -webkit-transition: all 0.3s;
            -ms-transition: all 0.3s;
             -o-transition: all 0.3s;
                transition: all 0.3s;
    }
    #modern .frame ul li:hover .details .description {
        height: 60px;
        margin-bottom: 10px;
    }
    #modern .details .counts {
        height: 20px;
    }
    #modern .details .counts a {
        float: left;
        color: #AAA;
        font-size: 11px;
        text-transform: uppercase;
        margin-right: 15px;
        
        -webkit-transition: all 0.3s;
            -ms-transition: all 0.3s;
             -o-transition: all 0.3s;
                transition: all 0.3s;
    }
    #modern .details .counts a:hover {
        color: #FFF;
        text-decoration: none;
    }
    #modern .details .counts a.more {
        float: right;
        opacity: 0;
        margin: 0;
    }
    #modern .frame ul li:hover .details .counts a.more {
        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>
        #modern .frame {
            width: 100%;
            height: 500px;
        }
        #modern .frame ul {
            list-style: none;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #modern .frame ul li {
            float: left;
            height: 100%;
        }
        #modern .frame ul li img {
            max-width: none;
        }
        #modern .frame ul li .mSCover {
            position: relative;
        }
        #modern .frame ul li .mSCover:after {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0);
            
            -webkit-transition: all 0.3s;
                -ms-transition: all 0.3s;
                 -o-transition: all 0.3s;
                    transition: all 0.3s;
        }
        #modern .frame ul li:hover .mSCover:after {
            background-color: rgba(0, 0, 0, 0.6);
        }
        #modern.mSMedia .frame ul li:hover .mSCover:after {
            display: none;
        }
        #modern .details {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            padding: 15px;
            color: #FFF;
            
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            
            -webkit-transition: all 0.3s;
                -ms-transition: all 0.3s;
                 -o-transition: all 0.3s;
                    transition: all 0.3s;
        }
        #modern.mSMedia .details {
            display: none;
        }
        #modern .frame ul li:hover .details {
            background-color: rgba(0, 0, 0, 0.6);
        }
        #modern .details .title {
            display: block;
            color: #FFF;
            font-size: 18px;
            text-transform: uppercase;
            text-decoration: none;
            margin-bottom: 10px;
            text-shadow: 1px 1px 0 #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #modern .details .description {
            font-weight: 300;
            height: 0;
            overflow: hidden;
            color: #D5D5D5;
            
            -webkit-transition: all 0.3s;
                -ms-transition: all 0.3s;
                 -o-transition: all 0.3s;
                    transition: all 0.3s;
        }
        #modern .frame ul li:hover .details .description {
            height: 60px;
            margin-bottom: 10px;
        }
        #modern .details .counts {
            height: 20px;
        }
        #modern .details .counts a {
            float: left;
            color: #AAA;
            font-size: 11px;
            text-transform: uppercase;
            margin-right: 15px;
            
            -webkit-transition: all 0.3s;
                -ms-transition: all 0.3s;
                 -o-transition: all 0.3s;
                    transition: all 0.3s;
        }
        #modern .details .counts a:hover {
            color: #FFF;
            text-decoration: none;
        }
        #modern .details .counts a.more {
            float: right;
            opacity: 0;
            filter: alpha(opacity=0);
            margin: 0;
        }
        #modern .frame ul li:hover .details .counts a.more {
            opacity: 1;
            filter: alpha(opacity=100);
        }
    </style>
</head>
<body>

    <!-- PARENT -->
    <div class="mightyslider_carouselModern_skin clearfix" id="modern">
        <!-- FRAME -->
        <div class="frame" data-mightyslider="
            width: 1170,
            height: 370
        ">
            <!-- SLIDEELEMENT -->
            <ul class="slide_element">
                <!-- SLIDES -->
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</a>
                        <div class="description">Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris. Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">156 Likes</a>
                            <a href="javascript:void(0);">27 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Integer viverra felis a nisl volutpat placerat</a>
                        <div class="description">Nullam ornare, est vel scelerisque blandit, ligula lectus facilisis lectus, eget lacinia massa ante non magna. Cras sollicitudin diam eu tempor volutpat. Fusce scelerisque metus quam, ut ultrices eros blandit ac.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">132 Likes</a>
                            <a href="javascript:void(0);">16 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    video: 'http://vimeo.com/44941805'
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                        <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">234 Likes</a>
                            <a href="javascript:void(0);">23 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</a>
                        <div class="description">Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris. Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">156 Likes</a>
                            <a href="javascript:void(0);">27 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Integer viverra felis a nisl volutpat placerat</a>
                        <div class="description">Nullam ornare, est vel scelerisque blandit, ligula lectus facilisis lectus, eget lacinia massa ante non magna. Cras sollicitudin diam eu tempor volutpat. Fusce scelerisque metus quam, ut ultrices eros blandit ac.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">132 Likes</a>
                            <a href="javascript:void(0);">16 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                        <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">234 Likes</a>
                            <a href="javascript:void(0);">23 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</a>
                        <div class="description">Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris. Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">156 Likes</a>
                            <a href="javascript:void(0);">27 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Integer viverra felis a nisl volutpat placerat</a>
                        <div class="description">Nullam ornare, est vel scelerisque blandit, ligula lectus facilisis lectus, eget lacinia massa ante non magna. Cras sollicitudin diam eu tempor volutpat. Fusce scelerisque metus quam, ut ultrices eros blandit ac.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">132 Likes</a>
                            <a href="javascript:void(0);">16 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                        <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">234 Likes</a>
                            <a href="javascript:void(0);">23 Comments</a>
                        </div>
                    </div>
                </li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    link: {
                        url: 'http://dummyimage.com/800x600/d12335/fff.png'
                    }
                ">
                    <div class="details">
                        <a href="javascript:void(0);" class="title">Donec dignissim est ut ligula pulvinar elementum</a>
                        <div class="description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.</div>
                        <div class="counts">
                            <a href="javascript:void(0);" class="more">Read more</a>
                            <a href="javascript:void(0);">234 Likes</a>
                            <a href="javascript:void(0);">23 Comments</a>
                        </div>
                    </div>
                </li>
                <!-- END OF SLIDES -->
            </ul>
            <!-- END OF SLIDEELEMENT -->
        </div>
        <!-- END OF FRAME -->
    </div>
    <!-- END OF PARENT -->

    <!-- mightySlider requires jQuery 1.7+  -->
    <!-- If you already have jQuery on your page, you shouldn't include it second time. -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- 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(){
                /**
                 * Calculate the slides width in percent based on the parent's width.
                 *
                 * @return {String}
                 */
                function calculator(width){
                    var percent = '33.33%';

                    if (width <= 768) {
                        percent = '50%';
                    }

                    return percent;
                };

                // Global slider's DOM elements
                var $carousel = $('#modern'),
                    $frame = $('.frame', $carousel);

                // Calling new mightySlider class
                var slider = new mightySlider($frame, {
                    speed: 1000,
                    easing: 'easeOutExpo',
                    autoScale: 1,
                    viewport: 'fill',

                    // Navigation options
                    navigation: {
                        navigationType: 'basic',
                        activateOn: clickEvent,
                        slideSize: calculator($win.width())
                    },
                    
                    // Buttons options
                    buttons: {
                        prevPage: $('#modern_prev'),
                        nextPage: $('#modern_next')
                    }
                }).init();

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

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 $carousel = $('#showcase'),
                $frame = $('.frame', $carousel),
                $title = $('div.details #title', $carousel),
                $desc = $('div.details #desc', $carousel);

            // Calling mightySlider via jQuery proxy
            $frame.mightySlider({
                speed: 2000,
                easing: 'easeOutExpo',
                autoScale: 1,
                viewport: 'fill',

                // Navigation options
                navigation: {
                    activateOn: clickEvent,
                    slideSize: '20%'
                },
                
                // Buttons options
                buttons: {
                    prev: $('#showcase_prev'),
                    next: $('#showcase_next')
                },

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

            // Register callbacks to the events
            {
                // Register mightySlider :active event callback
                active: function(name, index){
                    $title.html(this.slides[index].options.title);
                    $desc.html(this.slides[index].options.desc);
                }
            });
        })();
    });
</script>
You need to put the following html markup in your html document where you want to have slider.
<!-- PARENT -->
<div class="mightyslider_carouselModern_skin clearfix" id="showcase">
    <!-- FRAME -->
    <div class="frame" data-mightyslider="
        width: 1170,
        height: 350
    ">
        <!-- SLIDEELEMENT -->
        <ul class="slide_element">
            <!-- SLIDES -->
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Suspendisse dapibus auctor leo eget malesuada',
                desc: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Suspendisse dapibus auctor leo eget malesuada',
                desc: 'Aliquam velit nisi, egestas ac massa quis, faucibus gravida dui. Integer eget aliquam ante.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Donec convallis lacus et nisi pretium',
                desc: 'Quisque tempus nulla felis, eu venenatis lacus rutrum quis. Cras feugiat posuere enim, ac sodales dolor.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Suspendisse at est quis augue',
                desc: 'In fringilla eros a nulla dignissim consectetur. Vestibulum adipiscing aliquam diam in consequat. Donec justo dui, feugiat eget volutpat et, ultricies vel elit. Quisque quis ullamcorper lorem, sit amet mollis nibh.'"></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Morbi consectetur tempus justo in pellentesque',
                desc: 'Donec bibendum ultricies porta. Curabitur suscipit nisi est, eu blandit massa venenatis sed.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Nunc varius, quam id imperdiet mattis',
                desc: 'Nullam iaculis mi metus, ac tempor leo porttitor vel. Phasellus in diam neque.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Maecenas vulputate ipsum vel risus viverra varius',
                desc: 'Praesent vel dui dignissim, consequat metus eget, dignissim sapien. Praesent et lacus ac diam pretium eleifend.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Aenean sodales aliquet odio',
                desc: 'Donec magna dui, dapibus ac nibh eget, ultrices tristique nibh. Vestibulum vitae erat dolor. Donec ut viverra nisl.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Mauris sollicitudin, nulla nec',
                desc: 'Nam feugiat mauris eget lectus iaculis, in ultrices ante vulputate. Nunc pellentesque sed nulla eu luctus. Donec tempus imperdiet mi quis viverra.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Ut rhoncus luctus lectus ac viverra',
                desc: 'Fusce sed rutrum lectus. Vestibulum pharetra pharetra lobortis. Morbi varius vitae ligula vel auctor.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Morbi vel magna mi. Integer tristique',
                desc: 'Etiam ut tempor sem. Aliquam fringilla feugiat odio a iaculis. Etiam et suscipit turpis, quis feugiat leo.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Integer non felis ut enim lobortis',
                desc: 'Aliquam scelerisque, ante eget cursus ultricies, mi urna facilisis magna, ac tincidunt est elit in sapien.'
            "></li>
            <li class="slide" data-mightyslider="
                cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Ut a elit nec ipsum varius lobortis',
                desc: 'Nunc nec tortor accumsan, euismod leo nec, accumsan augue. Morbi tincidunt ultricies blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam lacinia vel augue quis accumsan.'
            "></li>
            <!-- END OF SLIDES -->
        </ul>
        <!-- END OF SLIDEELEMENT -->
    </div>
    <!-- END OF FRAME -->
    <div class="details">
        <div>
            <div id="title"></div>
            <div id="desc"></div>
        </div>
    </div>
</div>
<!-- END OF PARENT -->
You need to put the following styles just before the </head>
<style>
    #showcase {
        background: #000 url('assets/img/curved_wooden.jpg') no-repeat 50%;
        background-size: 100% 100%;
        border-top: #000 2px solid;
        border-bottom: #000 2px solid;
        
        -webkit-box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
                box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
    }
    #showcase .frame {
        width: 100%;
        padding: 100px 0 170px 0;
    }
    #showcase .frame ul {
        position: relative !important;
        list-style: none;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #showcase .frame ul li {
        float: left;
        height: 100%;
        margin-right: 60px;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        
        -webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
                box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
    }
    #showcase .frame ul li .mSCover {
        -webkit-border-radius: 5px;
                border-radius: 5px;
    }
    #showcase .frame ul li img {
        max-width: none;
    }
    #showcase .details {
        width: 100%;
        position: absolute;
        bottom: 30px;
        text-align: center;
        color: #666;
        font-size: 16px;
        font-weight: 300;
    }
    #showcase .details > div {
        display: inline-block;
        background: #FFF;
        padding: 10px 20px;
        max-width: 60%;

        -webkit-border-radius: 4px;
                border-radius: 4px;

        -webkit-box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
                box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
    }
    #showcase .details #title {
        color: #000;
        font-weight: 400;
        margin-bottom: 10px;
    }
    @media (max-width: 767px) {
        #showcase .frame {
            padding: 100px 0;
        }
        #showcase .details {
            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>
        #showcase {
            background: #000 url('assets/img/curved_wooden.jpg') no-repeat 50%;
            background-size: 100% 100%;
            border-top: #000 2px solid;
            border-bottom: #000 2px solid;
            
            -webkit-box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
                    box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
        }
        #showcase .frame {
            width: 100%;
            padding: 100px 0 170px 0;
        }
        #showcase .frame ul {
            position: relative !important;
            list-style: none;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #showcase .frame ul li {
            float: left;
            height: 100%;
            margin-right: 60px;

            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            
            -webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
                    box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
        }
        #showcase .frame ul li .mSCover {
            -webkit-border-radius: 5px;
                    border-radius: 5px;
        }
        #showcase .frame ul li img {
            max-width: none;
        }
        #showcase .details {
            width: 100%;
            position: absolute;
            bottom: 30px;
            text-align: center;
            color: #666;
            font-size: 16px;
            font-weight: 300;
        }
        #showcase .details > div {
            display: inline-block;
            background: #FFF;
            padding: 10px 20px;
            max-width: 60%;

            -webkit-border-radius: 4px;
                    border-radius: 4px;

            -webkit-box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
                    box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
        }
        #showcase .details #title {
            color: #000;
            font-weight: 400;
            margin-bottom: 10px;
        }
        @media (max-width: 767px) {
            #showcase .frame {
                padding: 100px 0;
            }
            #showcase .details {
                display: none;
            }
        }
    </style>
</head>
<body>

    <!-- PARENT -->
    <div class="mightyslider_carouselModern_skin clearfix" id="showcase">
        <!-- FRAME -->
        <div class="frame" data-mightyslider="
            width: 1170,
            height: 350
        ">
            <!-- SLIDEELEMENT -->
            <ul class="slide_element">
                <!-- SLIDES -->
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Suspendisse dapibus auctor leo eget malesuada',
                    desc: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Suspendisse dapibus auctor leo eget malesuada',
                    desc: 'Aliquam velit nisi, egestas ac massa quis, faucibus gravida dui. Integer eget aliquam ante.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Donec convallis lacus et nisi pretium',
                    desc: 'Quisque tempus nulla felis, eu venenatis lacus rutrum quis. Cras feugiat posuere enim, ac sodales dolor.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Suspendisse at est quis augue',
                    desc: 'In fringilla eros a nulla dignissim consectetur. Vestibulum adipiscing aliquam diam in consequat. Donec justo dui, feugiat eget volutpat et, ultricies vel elit. Quisque quis ullamcorper lorem, sit amet mollis nibh.'"></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Morbi consectetur tempus justo in pellentesque',
                    desc: 'Donec bibendum ultricies porta. Curabitur suscipit nisi est, eu blandit massa venenatis sed.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Nunc varius, quam id imperdiet mattis',
                    desc: 'Nullam iaculis mi metus, ac tempor leo porttitor vel. Phasellus in diam neque.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Maecenas vulputate ipsum vel risus viverra varius',
                    desc: 'Praesent vel dui dignissim, consequat metus eget, dignissim sapien. Praesent et lacus ac diam pretium eleifend.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Aenean sodales aliquet odio',
                    desc: 'Donec magna dui, dapibus ac nibh eget, ultrices tristique nibh. Vestibulum vitae erat dolor. Donec ut viverra nisl.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Mauris sollicitudin, nulla nec',
                    desc: 'Nam feugiat mauris eget lectus iaculis, in ultrices ante vulputate. Nunc pellentesque sed nulla eu luctus. Donec tempus imperdiet mi quis viverra.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Ut rhoncus luctus lectus ac viverra',
                    desc: 'Fusce sed rutrum lectus. Vestibulum pharetra pharetra lobortis. Morbi varius vitae ligula vel auctor.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Morbi vel magna mi. Integer tristique',
                    desc: 'Etiam ut tempor sem. Aliquam fringilla feugiat odio a iaculis. Etiam et suscipit turpis, quis feugiat leo.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Integer non felis ut enim lobortis',
                    desc: 'Aliquam scelerisque, ante eget cursus ultricies, mi urna facilisis magna, ac tincidunt est elit in sapien.'
                "></li>
                <li class="slide" data-mightyslider="
                    cover: 'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Ut a elit nec ipsum varius lobortis',
                    desc: 'Nunc nec tortor accumsan, euismod leo nec, accumsan augue. Morbi tincidunt ultricies blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam lacinia vel augue quis accumsan.'
                "></li>
                <!-- END OF SLIDES -->
            </ul>
            <!-- END OF SLIDEELEMENT -->
        </div>
        <!-- END OF FRAME -->
        <div class="details">
            <div>
                <div id="title"></div>
                <div id="desc"></div>
            </div>
        </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>
    <!-- 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 $carousel = $('#showcase'),
                    $frame = $('.frame', $carousel),
                    $title = $('div.details #title', $carousel),
                    $desc = $('div.details #desc', $carousel);

                // Calling mightySlider via jQuery proxy
                $frame.mightySlider({
                    speed: 2000,
                    easing: 'easeOutExpo',
                    autoScale: 1,
                    viewport: 'fill',

                    // Navigation options
                    navigation: {
                        activateOn: clickEvent,
                        slideSize: '20%'
                    },
                    
                    // Buttons options
                    buttons: {
                        prev: $('#showcase_prev'),
                        next: $('#showcase_next')
                    },

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

                // Register callbacks to the events
                {
                    // Register mightySlider :active event callback
                    active: function(name, index){
                        $title.html(this.slides[index].options.title);
                        $desc.html(this.slides[index].options.desc);
                    }
                });
            })();
        });
    </script>
</body>
</html>

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 $carousel = $('#video_showcase'),
                $frame = $('.frame', $carousel),
                $title = $('div.details #title', $carousel),
                $desc = $('div.details #desc', $carousel);

            // Calling mightySlider via jQuery proxy
            $frame.mightySlider({
                speed: 1000,
                easing: 'easeOutExpo',
                autoScale: 1,
                viewport: 'fill',

                // Navigation options
                navigation: {
                    activateOn: clickEvent,
                    slideSize: '53%'
                },
                
                // Buttons options
                buttons: {
                    prev: $('#video_showcase_prev'),
                    next: $('#video_showcase_next')
                },

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

            // Register callbacks to the events
            {
                // Register mightySlider :active event callback
                active: function(name, index){
                    $title.html(this.slides[index].options.title);
                    $desc.html(this.slides[index].options.desc);
                }
            });
        })();
    });
</script>
You need to put the following html markup in your html document where you want to have slider.
<!-- PARENT -->
<div class="mightyslider_carouselModern_skin clearfix" id="video_showcase">
    <!-- FRAME -->
    <div class="frame" data-mightyslider="
        width: 1280,
        height: 350
    ">
        <!-- SLIDEELEMENT -->
        <ul class="slide_element">
            <!-- SLIDES -->
            <li class="slide" data-mightyslider="
                video: 'http://vimeo.com/55945051',
                title: 'Time of Rio',
                desc: 'Vimeo'
            "></li>
            <li class="slide" data-mightyslider="
                cover:'assets/img/photos/358263658_1280.jpg',
                mp4: 'http://mightyslider.com/video/124221511.mp4',
                webm: 'http://mightyslider.com/video/124221511.webm',
                videoFrame: 'src/videoframes/mediaelementjs.php',
                title: 'Mountains in Motion',
                desc: 'HTML5 Video with custom player (mediaelementjs)'
            "></li>
            <li class="slide" data-mightyslider="
                video: 'http://www.youtube.com/watch?v=S1n0Y3MkZOo',
                title: 'Beautiful Forest',
                desc: 'YouTube'
            "></li>
            <li class="slide" data-mightyslider="
                video: 'http://vimeo.com/29017795',
                title: 'Experience Zero Gravity',
                desc: 'Vimeo'
            "></li>
            <!-- END OF SLIDES -->
        </ul>
        <!-- END OF SLIDEELEMENT -->
    </div>
    <!-- END OF FRAME -->
    <div class="details">
        <div>
            <div id="title"></div>
            <div id="desc"></div>
        </div>
    </div>
</div>
<!-- END OF PARENT -->
You need to put the following styles just before the </head>
<style>
    #video_showcase {
        background: #000 url('assets/img/curved_wooden_2.jpg') no-repeat 50%;
        background-size: 100% 100%;
        border-top: #000 2px solid;
        border-bottom: #000 2px solid;
        
        -webkit-box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
                box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
    }
    #video_showcase .frame {
        width: 100%;
        padding: 100px 0 170px 0;
    }
    #video_showcase .frame ul {
        position: relative !important;
        list-style: none;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #video_showcase .frame ul li {
        float: left;
        height: 100%;
        margin-right: 80px;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;

        -webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
                box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
    }
    #video_showcase .frame ul li .mSCover {
        border: #666 1px solid;
        border: rgba(0,0,0,0.3) 1px solid;
        margin-left: -1px;

        -webkit-border-radius: 5px;
                border-radius: 5px;
    }
    #video_showcase .frame ul li img {
        max-width: none;
    }
    #video_showcase .details {
        width: 100%;
        position: absolute;
        bottom: 30px;
        text-align: center;
        color: #666;
        font-size: 16px;
        font-weight: 300;
    }
    #video_showcase .details > div {
        display: inline-block;
        background: #FFF;
        padding: 10px 20px;
        max-width: 60%;

        -webkit-border-radius: 4px;
                border-radius: 4px;

        -webkit-box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
                box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
    }
    #video_showcase .details #title {
        color: #000;
        font-weight: 400;
        margin-bottom: 10px;
    }
    @media (max-width: 767px) {
        #video_showcase .frame {
            padding: 100px 0;
        }
        #video_showcase .details {
            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>
        #video_showcase {
            background: #000 url('assets/img/curved_wooden_2.jpg') no-repeat 50%;
            background-size: 100% 100%;
            border-top: #000 2px solid;
            border-bottom: #000 2px solid;
            
            -webkit-box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
                    box-shadow: 0 30px 30px rgba(0, 0, 0, .6) inset;
        }
        #video_showcase .frame {
            width: 100%;
            padding: 100px 0 170px 0;
        }
        #video_showcase .frame ul {
            position: relative !important;
            list-style: none;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #video_showcase .frame ul li {
            float: left;
            height: 100%;
            margin-right: 80px;

            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;

            -webkit-box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
                    box-shadow: 0 38px 30px -18px rgba(0, 0, 0, .6);
        }
        #video_showcase .frame ul li .mSCover {
            border: #666 1px solid;
            border: rgba(0,0,0,0.3) 1px solid;
            margin-left: -1px;

            -webkit-border-radius: 5px;
                    border-radius: 5px;
        }
        #video_showcase .frame ul li img {
            max-width: none;
        }
        #video_showcase .details {
            width: 100%;
            position: absolute;
            bottom: 30px;
            text-align: center;
            color: #666;
            font-size: 16px;
            font-weight: 300;
        }
        #video_showcase .details > div {
            display: inline-block;
            background: #FFF;
            padding: 10px 20px;
            max-width: 60%;

            -webkit-border-radius: 4px;
                    border-radius: 4px;

            -webkit-box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
                    box-shadow: 0 25px 7px -18px rgba(0, 0, 0, .3);
        }
        #video_showcase .details #title {
            color: #000;
            font-weight: 400;
            margin-bottom: 10px;
        }
        @media (max-width: 767px) {
            #video_showcase .frame {
                padding: 100px 0;
            }
            #video_showcase .details {
                display: none;
            }
        }
    </style>
</head>
<body>

    <!-- PARENT -->
    <div class="mightyslider_carouselModern_skin clearfix" id="video_showcase">
        <!-- FRAME -->
        <div class="frame" data-mightyslider="
            width: 1280,
            height: 350
        ">
            <!-- SLIDEELEMENT -->
            <ul class="slide_element">
                <!-- SLIDES -->
                <li class="slide" data-mightyslider="
                    cover:'assets/img/photos/387357227_1280.jpg'
                    video: 'http://vimeo.com/55945051',
                    title: 'Time of Rio',
                    desc: 'Vimeo'
                "></li>
                <li class="slide" data-mightyslider="
                    cover:'assets/img/photos/358263658_1280.jpg',
                    mp4: 'http://mightyslider.com/video/124221511.mp4',
                    webm: 'http://mightyslider.com/video/124221511.webm',
                    videoFrame: 'src/videoframes/mediaelementjs.php',
                    title: 'Mountains in Motion',
                    desc: 'HTML5 Video with custom player (mediaelementjs)'
                "></li>
                <li class="slide" data-mightyslider="
                    video: 'http://www.youtube.com/watch?v=S1n0Y3MkZOo',
                    title: 'Beautiful Forest',
                    desc: 'YouTube'
                "></li>
                <li class="slide" data-mightyslider="
                    video: 'http://vimeo.com/29017795',
                    title: 'Experience Zero Gravity',
                    desc: 'Vimeo'
                "></li>
                <!-- END OF SLIDES -->
            </ul>
            <!-- END OF SLIDEELEMENT -->
        </div>
        <!-- END OF FRAME -->
        <div class="details">
            <div>
                <div id="title"></div>
                <div id="desc"></div>
            </div>
        </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>
    <!-- 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 $carousel = $('#video_showcase'),
                    $frame = $('.frame', $carousel),
                    $title = $('div.details #title', $carousel),
                    $desc = $('div.details #desc', $carousel);

                // Calling mightySlider via jQuery proxy
                $frame.mightySlider({
                    speed: 1000,
                    easing: 'easeOutExpo',
                    autoScale: 1,
                    viewport: 'fill',

                    // Navigation options
                    navigation: {
                        activateOn: clickEvent,
                        slideSize: '53%'
                    },
                    
                    // Buttons options
                    buttons: {
                        prev: $('#video_showcase_prev'),
                        next: $('#video_showcase_next')
                    },

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

                // Register callbacks to the events
                {
                    // Register mightySlider :active event callback
                    active: function(name, index){
                        $title.html(this.slides[index].options.title);
                        $desc.html(this.slides[index].options.desc);
                    }
                });
            })();
        });
    </script>
</body>
</html>

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 $carousel = $('#cover_flow'),
                $frame = $('.frame', $carousel),
                $title = $('div.details #title', $carousel),
                $desc = $('div.details #desc', $carousel);

            // Calling mightySlider via jQuery proxy
            $frame.mightySlider({
                autoScale: 1,
                viewport: 'fill',
                startAt: 3,

                // Navigation options
                navigation: {
                    activateOn: clickEvent,
                    slideSize: '25.31%'
                },
                
                // Commands options
                commands: {
                    buttons: 1
                },

                // Scrolling options
                scrolling: {
                    scrollBy: 1
                }
            },

            // Register callbacks to the events
            {
                // Register mightySlider :active event callback
                active: function(name, index){
                    $title.html(this.slides[index].options.title);
                    $desc.html(this.slides[index].options.desc);
                }
            });
        })();
    });
</script>
You need to put the following html markup in your html document where you want to have slider.
<!-- PARENT -->
<div class="mightyslider_carouselCoverFlow_skin clearfix" id="cover_flow">
    <!-- FRAME -->
    <div class="frame" data-mightyslider="
        width: 1583,
        height: 400
    ">
        <!-- SLIDEELEMENT -->
        <ul class="slide_element">
            <!-- SLIDES -->
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'I Look to You',
                desc: 'Whitney Houston',
                link: {
                    url: 'https://itunes.apple.com/us/album/i-look-to-you/id328256728?i=328256908&uo=4',
                    target: '_blank'
                }
            "></li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Greatest Hits',
                desc: 'Enrique Iglesias',
                link: {
                    url: 'https://itunes.apple.com/us/album/enrique-iglesias-greatest/id295364999?uo=4',
                    target: '_blank'
                }
            "></li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Original Hits',
                desc: 'Pitbull',
                link: {
                    url: 'https://itunes.apple.com/us/album/original-hits/id521010516',
                    target: '_blank'
                }
            "></li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Loud',
                desc: 'Rihanna',
                link: {
                    url: 'https://itunes.apple.com/us/album/loud/id458437339?uo=4',
                    target: '_blank'
                }
            "></li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'MDNA',
                desc: 'Madonna',
                link: {
                    url: 'https://itunes.apple.com/us/album/mdna-deluxe-version/id511415302',
                    target: '_blank'
                }
            "></li>
            <li class="slide" data-mightyslider="
                cover:'http://dummyimage.com/800x600/d12335/fff.png',
                title: 'Auld Lang Syne (The New Year\'s Anthem) [The Remixes]',
                desc: 'Mariah Carey',
                link: {
                    url: 'https://itunes.apple.com/us/album/auld-lang-syne-new-years-anthem/id408188403',
                    target: '_blank'
                }
            "></li>
            <!-- END OF SLIDES -->
        </ul>
        <!-- END OF SLIDEELEMENT -->
    </div>
    <!-- END OF FRAME -->
    <div class="details">
        <div id="title"></div>
        <div id="desc"></div>
    </div>
</div>
<!-- END OF PARENT -->
You need to put the following styles just before the </head>
<style>
    #cover_flow .frame {
        padding: 100px 0;
    }
    #cover_flow .frame ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #cover_flow .frame ul li {
        margin-right: -140px;
    }
    #cover_flow .frame ul li img {
        max-width: none;
    }
    #cover_flow .details {
        width: 100%;
        position: absolute;
        bottom: 30px;
        text-align: center;
        text-transform: uppercase;
        text-shadow: 0 -1px rgba(0,0,0,0.6);
        color: #CCC;
        font-size: 16px;
        font-weight: 300;
        pointer-events: none;
    }
    #cover_flow .details #title {
        font-weight: 400;
        color: #FFF;
    }

    /* Responsive Improvements */
    @media (max-width: 1200px) {
        #cover_flow .frame ul li {
            margin-right: -100px;
        }
    }
    @media (max-width: 1023px) {
        #cover_flow .frame ul li {
            margin-right: -90px;
        }
    }
    @media (max-width: 767px) {
        #cover_flow .frame ul li {
            margin-right: -70px;
        }
    }
    @media (max-width: 680px) {
        #cover_flow .frame ul li {
            margin-right: -50px;
        }
    }
    @media (max-width: 479px) {
        #cover_flow .frame ul li {
            margin-right: -40px;
        }
    }
    @media (max-width: 320px) {
        #cover_flow .frame ul li {
            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>
        #cover_flow .frame {
            padding: 100px 0;
        }
        #cover_flow .frame ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #cover_flow .frame ul li {
            margin-right: -140px;
        }
        #cover_flow .frame ul li img {
            max-width: none;
        }
        #cover_flow .details {
            width: 100%;
            position: absolute;
            bottom: 30px;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 0 -1px rgba(0,0,0,0.6);
            color: #CCC;
            font-size: 16px;
            font-weight: 300;
            pointer-events: none;
        }
        #cover_flow .details #title {
            font-weight: 400;
            color: #FFF;
        }

        /* Responsive Improvements */
        @media (max-width: 1200px) {
            #cover_flow .frame ul li {
                margin-right: -100px;
            }
        }
        @media (max-width: 1023px) {
            #cover_flow .frame ul li {
                margin-right: -90px;
            }
        }
        @media (max-width: 767px) {
            #cover_flow .frame ul li {
                margin-right: -70px;
            }
        }
        @media (max-width: 680px) {
            #cover_flow .frame ul li {
                margin-right: -50px;
            }
        }
        @media (max-width: 479px) {
            #cover_flow .frame ul li {
                margin-right: -40px;
            }
        }
        @media (max-width: 320px) {
            #cover_flow .frame ul li {
                margin-right: -30px;
            }
        }
    </style>
</head>
<body>

    <!-- PARENT -->
    <div class="mightyslider_carouselCoverFlow_skin clearfix" id="cover_flow">
        <!-- FRAME -->
        <div class="frame" data-mightyslider="
            width: 1583,
            height: 400
        ">
            <!-- SLIDEELEMENT -->
            <ul class="slide_element">
                <!-- SLIDES -->
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'I Look to You',
                    desc: 'Whitney Houston',
                    link: {
                        url: 'https://itunes.apple.com/us/album/i-look-to-you/id328256728?i=328256908&uo=4',
                        target: '_blank'
                    }
                "></li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Greatest Hits',
                    desc: 'Enrique Iglesias',
                    link: {
                        url: 'https://itunes.apple.com/us/album/enrique-iglesias-greatest/id295364999?uo=4',
                        target: '_blank'
                    }
                "></li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Original Hits',
                    desc: 'Pitbull',
                    link: {
                        url: 'https://itunes.apple.com/us/album/original-hits/id521010516',
                        target: '_blank'
                    }
                "></li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Loud',
                    desc: 'Rihanna',
                    link: {
                        url: 'https://itunes.apple.com/us/album/loud/id458437339?uo=4',
                        target: '_blank'
                    }
                "></li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'MDNA',
                    desc: 'Madonna',
                    link: {
                        url: 'https://itunes.apple.com/us/album/mdna-deluxe-version/id511415302',
                        target: '_blank'
                    }
                "></li>
                <li class="slide" data-mightyslider="
                    cover:'http://dummyimage.com/800x600/d12335/fff.png',
                    title: 'Auld Lang Syne (The New Year\'s Anthem) [The Remixes]',
                    desc: 'Mariah Carey',
                    link: {
                        url: 'https://itunes.apple.com/us/album/auld-lang-syne-new-years-anthem/id408188403',
                        target: '_blank'
                    }
                "></li>
                <!-- END OF SLIDES -->
            </ul>
            <!-- END OF SLIDEELEMENT -->
        </div>
        <!-- END OF FRAME -->
        <div class="details">
            <div id="title"></div>
            <div id="desc"></div>
        </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>
    <!-- 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 $carousel = $('#cover_flow'),
                    $frame = $('.frame', $carousel),
                    $title = $('div.details #title', $carousel),
                    $desc = $('div.details #desc', $carousel);

                // Calling mightySlider via jQuery proxy
                $frame.mightySlider({
                    autoScale: 1,
                    viewport: 'fill',
                    startAt: 3,

                    // Navigation options
                    navigation: {
                        activateOn: clickEvent,
                        slideSize: '25.31%'
                    },
                    
                    // Commands options
                    commands: {
                        buttons: 1
                    },

                    // Scrolling options
                    scrolling: {
                        scrollBy: 1
                    }
                },

                // Register callbacks to the events
                {
                    // Register mightySlider :active event callback
                    active: function(name, index){
                        $title.html(this.slides[index].options.title);
                        $desc.html(this.slides[index].options.desc);
                    }
                });
            })();
        });
    </script>
</body>
</html>

  1. Active slide is always centered, and middle slide is always activated.
  2. Activated slide is centered when possible.