Simple slider stretched to full width of wrapper.
As usual you can put anything in each slide, or add bullets, thumbnails or tabs.
<⁄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>
<!-- 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 -->
</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>