Loading...

This is an animated block, add any number of them to any type of slide

Put completely anything inside - text, images, inputs, links, buttons.

This is a static HTML block

It's always displayed and not animated by slider.

© By Csaba Kovacs

You can link to this slide by adding #2 to url.

Learn more

© By Jerome Chen




Simple slider stretched to full width of wrapper.

As usual you can put anything in each slide, or add bullets, thumbnails or tabs.

Code View

You need to put the following scripts just before the <⁄body>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        (function(){
            // Global slider's DOM elements
            var $example = $('#example'),
                $frame = $('.frame', $example);

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

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

                // Pages options
                pages: {
                    activateOn: 'click'
                },

                // Commands options
                commands: {
                    pages: 1,
                    buttons: 1
                }
            });
        })();
    });
</script>
You need to put the following html markup in your html document where you want to have slider.
<!-- PARENT -->
<div id="example" class="mightyslider_modern_skin">
    <!-- FRAME -->
    <div class="frame">
        <!-- SLIDEELEMENT -->
        <div class="slide_element">
            <!-- SLIDES -->
            <div class="slide" data-mightyslider="
                cover: 'assets/img/photos/4251000773_c9696b34f0_o.jpg',
                link: {
                    url: 'http://www.flickr.com/photos/36081137@N05/4251000773/',
                    target: '_blank'
                }
            ">
                <div class="mSCaption infoBlock infoBlockLeftBlack" data-msanimation="{
                    speed: 700,
                    easing: 'easeOutQuint',
                    style: {
                        left: 30,
                        opacity: 1
                    }
                }">
                    <h4>This is an animated block, add any number of them to any type of slide</h4>
                    <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
                </div>
                <div class="credit">
                    © By <a href="http://www.flickr.com/photos/36081137@N05/" target="_blank">Fabius_climbing</a>
                </div>
            </div>
            <div class="slide" data-mightyslider="
                cover: 'assets/img/photos/8482374380_75a2ba385f_h.jpg',
                link: {
                    url: 'http://www.flickr.com/photos/azalkimista/8482374380/',
                    target: '_blank'
                }
            ">
                <div class="infoBlock">
                    <h4>This is a static HTML block</h4>
                    <p>It's always displayed and not animated by slider.</p>
                </div>
                <div class="credit">
                    © By <a href="http://www.flickr.com/photos/azalkimista/" target="_blank">Csaba Kovacs</a>
                </div>
            </div>
            <div class="slide" data-mightyslider="video: 'http://vimeo.com/14773535'">
                <div class="mSCaption infoBlock infoBlockLeftBlack infoBlock2" data-msanimation="{ speed: 700, easing: 'easeOutQuint', style: { top: 30, opacity: 1 } }">
                    <h4>You can link to this slide by adding #2 to url.</h4>
                    <p><a href="fullscreen-slider.html">Learn more</a></p>
                </div>
                <div class="credit">
                    © By <a href="http://vimeo.com/colinhesterly" target="_blank">Colin Hesterly</a>
                </div>
            </div>
            <div class="slide" data-mightyslider="cover: 'assets/img/photos/2237408064_c583610dba_o.jpg', link: { url: 'http://www.flickr.com/photos/rosku/2237408064/', target: '_blank' }">
                <div class="credit">
                    © By <a href="http://www.flickr.com/photos/rosku/" target="_blank">Krzysztof Jurek</a>
                </div>
            </div>
            <div class="slide" data-mightyslider="cover: 'assets/img/photos/61132898_2d8f9e5d9d_o.jpg', link: { url: 'http://www.flickr.com/photos/jerome934/61132898/', target: '_blank' }">
                <div class="credit">
                    © By <a href="http://www.flickr.com/photos/jerome934/" target="_blank">Jerome Chen</a>
                </div>
            </div>
            <!-- END OF SLIDES -->
        </div>
        <!-- END OF SLIDEELEMENT -->
    </div>
    <!-- END OF FRAME -->
</div>
<!-- END OF PARENT -->
You need to put the following styles just before the </head>
<style>
#example {
  height: 500px;
  overflow: hidden;
  margin-top: 50px;
}
#example .mSButtons {
  height: 80%;
}
#example .frame {
  width: 100%;
  height: 100%;
}
#example .frame .slide_element {
  height: 100%;
}
#example .frame .slide_element > div {
  float: left;
  height: 100%;
  overflow: hidden;
}
#example .frame .mSCover img {
  max-width: none;
}
#example .credit {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 11px;
  line-height: normal;
  font-weight: 300;
  text-shadow: rgba(0,0,0,0.7) 0 1px 0px;
  color: #CCC;
  background: #000;
  background: rgba(0,0,0,0.6);
  padding: 0 4px;
  white-space: nowrap;
  z-index: 1002;
  text-transform: uppercase;
}
#example .credit a {
  color: #FFF;
  font-weight: 400;
}
.infoBlock {
  position: absolute;
  top: 30px;
  right: 30px;
  left: auto;
  max-width: 30%;
  padding-bottom: 0;
  background: #FFF;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  padding: 20px;
  z-index: 1002;
}
.infoBlockLeftBlack {
  color: #FFF;
  background: #000;
  background: rgba(0,0,0,0.55);
  left: 90px;
  right: auto;
  opacity: 0;
}
.infoBlock2 {
  top: 90px;
  left: 100px;
}
.infoBlock h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  padding-bottom: 3px;
  color: inherit;
  text-align: left;
}
.infoBlock p {
  font-size: 16px;
  font-weight: 300;
  margin: 4px 0 0;
}
.infoBlock a {
  color: #FFF;
  text-decoration: underline;
}

@media (max-width: 979px) {
  #example {
    height: 400px;
    margin-top: 0;
  }
  .infoBlock {
    min-width: 40%;
  }
}

@media (max-width: 768px) {
  #example {
    margin: 0 -20px;
    height: 300px;
  }
  .infoBlock {
    padding: 10px;
    height: auto;
    max-height: 100%;
  }
  .infoBlock h4 {
    font-size: 14px;
    line-height: 17px;
  }
  .infoBlock p {
    font-size: 12px;
  }
}
</style>
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- mightySlider basic stylesheet with skins imported -->
    <link rel="stylesheet" type="text/css" href="mightyslider/src/css/mightyslider.css"/>

    <style>
#example {
      height: 500px;
      overflow: hidden;
      margin-top: 50px;
    }
    #example .mSButtons {
      height: 80%;
    }
    #example .frame {
      width: 100%;
      height: 100%;
    }
    #example .frame .slide_element {
      height: 100%;
    }
    #example .frame .slide_element > div {
      float: left;
      height: 100%;
      overflow: hidden;
    }
    #example .frame .mSCover img {
      max-width: none;
    }
    #example .credit {
      position: absolute;
      bottom: 10px;
      left: 10px;
      font-size: 11px;
      line-height: normal;
      font-weight: 300;
      text-shadow: rgba(0,0,0,0.7) 0 1px 0px;
      color: #CCC;
      background: #000;
      background: rgba(0,0,0,0.6);
      padding: 0 4px;
      white-space: nowrap;
      z-index: 1002;
      text-transform: uppercase;
    }
    #example .credit a {
      color: #FFF;
      font-weight: 400;
    }
    .infoBlock {
      position: absolute;
      top: 30px;
      right: 30px;
      left: auto;
      max-width: 30%;
      padding-bottom: 0;
      background: #FFF;
      background: rgba(255, 255, 255, 0.6);
      overflow: hidden;
      padding: 20px;
      z-index: 1002;
    }
    .infoBlockLeftBlack {
      color: #FFF;
      background: #000;
      background: rgba(0,0,0,0.55);
      left: 90px;
      right: auto;
      opacity: 0;
    }
    .infoBlock2 {
      top: 90px;
      left: 100px;
    }
    .infoBlock h4 {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
      margin: 0;
      padding-bottom: 3px;
      color: inherit;
      text-align: left;
    }
    .infoBlock p {
      font-size: 16px;
      font-weight: 300;
      margin: 4px 0 0;
    }
    .infoBlock a {
      color: #FFF;
      text-decoration: underline;
    }

    @media (max-width: 979px) {
      #example {
        height: 400px;
        margin-top: 0;
      }
      .infoBlock {
        min-width: 40%;
      }
    }

    @media (max-width: 768px) {
      #example {
        margin: 0 -20px;
        height: 300px;
      }
      .infoBlock {
        padding: 10px;
        height: auto;
        max-height: 100%;
      }
      .infoBlock h4 {
        font-size: 14px;
        line-height: 17px;
      }
      .infoBlock p {
        font-size: 12px;
      }
    }
    </style>
</head>
<body>


    <!-- mightySlider requires jQuery 1.7+  -->
    <!-- If you already have jQuery on your page, you shouldn't include it second time. -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- Uses the built in easing capabilities added In jQuery 1.1 to offer multiple easing options -->
    <script type="text/javascript" src="assets/js/jquery.easing-1.3.pack.js"></script>
    <!-- Mobile touch events for jQuery -->
    <script type="text/javascript" src="assets/js/jquery.mobile.just-touch.js"></script>
    <!-- mightySlider captions animation engine -->
    <script type="text/javascript" src="mightyslider/src/js/tweenlite.js"></script>
    <!-- Main slider JS script file -->
    <script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script>

    <script type="text/javascript">
    </script>
</body>
</html>