Apple template slider stretched to full width of wrapper.
Slider animate with custom easing effect.
Every slide has diffrent viewport and custom navigation color.
<⁄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 $example = $('#example'), $frame = $('.frame', $example); // Calling mightySlider via jQuery proxy $frame.mightySlider({ speed: 1000, easing: 'easeOutExpo', viewport: 'center', // Navigation options navigation: { slideSize: '100%', keyboardNavBy: 'slides' }, // Dragging options dragging: { swingSpeed: 0.1 }, // Thumbnails options thumbnails: { thumbnailNav: 'forceCentered', activateOn: clickEvent }, // Commands options commands: { pages: 1, thumbnails: 1, buttons: 1 } }, // Register callbacks to the events { // Register mightySlider :active event callback active: function(name, index){ var skin = this.slides[index].options.skin || ''; $example.removeClass('black').addClass(skin); } }); })(); }); </script>
<!-- PARENT --> <div id="example" class="mightyslider_modern_skin"> <!-- FRAME --> <div class="frame"> <!-- SLIDEELEMENT --> <div class="slide_element"> <!-- SLIDES --> <div class="slide1" data-mightyslider=" cover: 'assets/img/apple_images/ios_hero.png', thumbnail: 'assets/img/apple_images/ios_thum.jpg', link: { url: 'http://www.apple.com/ios/ios7/', target: '_blank' }, skin: 'black' "> <div class="texts"> <h2><a href="http://www.apple.com/ios/ios7/">iOS 7. The mobile OS from a whole new perspective.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/ios/ios7/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide2" data-mightyslider=" cover: 'assets/img/apple_images/osx_hero.jpg', thumbnail: 'assets/img/apple_images/osx_thum.jpg', link: { url: 'http://www.apple.com/osx/preview/', target: '_blank' }, viewport: 'fill' "> <div class="texts"> <h2><a href="http://www.apple.com/osx/preview/">OS X Mavericks. The next big release of the world’s most advanced desktop operating system.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/osx/preview/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide3" data-mightyslider=" cover: 'assets/img/apple_images/macpro_h.jpg', thumbnail: 'assets/img/apple_images/macpro_t.jpg', link: { url: 'http://www.apple.com/mac-pro/', target: '_blank' } "> <div class="texts"> <h2><a href="http://www.apple.com/mac-pro/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/mac-pro/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide4" data-mightyslider=" cover: 'assets/img/apple_images/macbookb.jpg', thumbnail: 'assets/img/apple_images/macbooka.jpg', link: { url: 'http://www.apple.com/macbook-air/', target: '_blank' }, skin: 'black' "> <div class="texts"> <h2><a href="http://www.apple.com/macbook-air/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/macbook-air/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide5" data-mightyslider=" cover: 'assets/img/apple_images/designee.jpg', thumbnail: 'assets/img/apple_images/designed.jpg', link: { url: 'http://www.apple.com/designed-by-apple/', target: '_blank' }, viewport: 'fill' "> <div class="texts"> <h2><a href="http://www.apple.com/designed-by-apple/">Designed by Apple in California</a></h2> <a href="http://www.apple.com/#designed-by-apple-tv-spot" target="_blank" class="watch">Watch the TV ad</a> <a href="http://www.apple.com/designed-by-apple/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide6" data-mightyslider=" cover: 'assets/img/apple_images/itunesrb.png', thumbnail: 'assets/img/apple_images/itunesra.jpg', link: { url: 'http://www.apple.com/itunes/itunes-radio/', target: '_blank' }, skin: 'black' "> <div class="texts"> <h2><a href="http://www.apple.com/itunes/itunes-radio/">iTunes Radio. Hear where your music takes you.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/itunes/itunes-radio/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide7" data-mightyslider=" cover: 'assets/img/apple_images/wwdc_her.jpg', thumbnail: 'assets/img/apple_images/wwdc_thu.jpg', link: { url: 'http://www.apple.com/apple-events/june-2013/', target: '_blank' }, viewport: 'fill' "> <div class="texts"> <h2><a href="http://www.apple.com/apple-events/june-2013/">WWDC 2013</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> </div> </div> <!-- END OF SLIDES --> </div> <!-- END OF SLIDEELEMENT --> </div> <!-- END OF FRAME --> </div> <!-- END OF PARENT -->
</head>
<style> #example { background: transparent; width: 100%; height: 709px; min-width: 980px; overflow: hidden; } #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 .frame .slide_element > div.slide1, #example .frame .slide_element > div.slide6 { background: #fafafa; } #example .frame .slide_element > div.slide1 .mSCover { margin-top: 27px; margin-left: 108px; } #example .frame .slide_element > div.slide3 { background: #000; } #example .frame .slide_element > div.slide3 .mSCover { margin-top: 22px; } #example .frame .slide_element > div.slide4 .mSCover { margin-top: -304px; margin-left: -153px; } #example .frame .slide_element > div.slide6 .mSCover { margin-left: -174px; margin-top: 0; } #example .frame .slide_element div.texts { position: absolute; width: 980px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; color: #000; z-index: 1001; pointer-events: none; } #example .frame .slide_element div.texts a { pointer-events: all; } #example .frame .slide_element div.texts h2 { display: block; overflow: hidden; text-indent: -9999px; } #example .frame .slide_element div.texts h2 a { display: block; overflow: hidden; text-indent: -9999px; } #example .frame .slide_element > div.slide1 div.texts h2 { margin-top: 105px; margin-left: 39px; margin-bottom: 12px; width: 400px; } #example .frame .slide_element > div.slide1 div.texts h2 a { width: 500px; height: 194px; background: url(assets/img/apple_images/ios_titl.png) no-repeat 0 0; background-size: 500px 194px; } #example .frame .slide_element div.texts a.watch, #example .frame .slide_element div.texts a.learn { display: block; margin: 0 0 0 42px; width: 148px; height: 0; padding-top: 35px; overflow: hidden; cursor: pointer; background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0; background-size: 255px 70px; zoom: 1; } #example .frame .slide_element div.texts a.watch:hover, #example .frame .slide_element div.texts a.learn:hover { background-position: 0 100% !important; } #example .frame .slide_element div.texts a.watch { width: 255px; background-image: url(assets/img/apple_images/watch_ke.png); } #example .frame .slide_element > div.slide1 div.texts a.learn { margin-top: 4px; } #example .frame .slide_element > div.slide2 div.texts, #example .frame .slide_element > div.slide3 div.texts, #example .frame .slide_element > div.slide4 div.texts, #example .frame .slide_element > div.slide5 div.texts, #example .frame .slide_element > div.slide6 div.texts, #example .frame .slide_element > div.slide7 div.texts { text-align: center; } #example .frame .slide_element > div.slide2 div.texts h2 { width: 581px; height: 475px; margin: 0 auto; margin-top: 95px; margin-bottom: -57px; } #example .frame .slide_element > div.slide2 div.texts h2 a { width: 581px; height: 475px; background: url(assets/img/apple_images/osx_titl.png) no-repeat 0 0; background-size: 581px 475px; } #example .frame .slide_element > div.slide2 div.texts a.watch, #example .frame .slide_element > div.slide2 div.texts a.learn, #example .frame .slide_element > div.slide3 div.texts a.watch, #example .frame .slide_element > div.slide3 div.texts a.learn, #example .frame .slide_element > div.slide4 div.texts a.watch, #example .frame .slide_element > div.slide4 div.texts a.learn, #example .frame .slide_element > div.slide5 div.texts a.watch, #example .frame .slide_element > div.slide5 div.texts a.learn, #example .frame .slide_element > div.slide6 div.texts a.watch, #example .frame .slide_element > div.slide6 div.texts a.learn, #example .frame .slide_element > div.slide7 div.texts a.watch { display: inline-block; margin: 0 35px 0 0; background: url(assets/img/apple_images/learn_mq.png) no-repeat 0 0; background-size: 255px 70px; zoom: 1; } #example .frame .slide_element > div.slide2 div.texts a.watch, #example .frame .slide_element > div.slide3 div.texts a.watch, #example .frame .slide_element > div.slide4 div.texts a.watch, #example .frame .slide_element > div.slide5 div.texts a.watch { width: 255px; margin-left: 35px; background-image: url(assets/img/apple_images/watch_kg.png); } #example .frame .slide_element > div.slide3 div.texts h2 { width: 700px; height: 150px; margin: 0 auto; margin-top: 368px; margin-bottom: 4px; } #example .frame .slide_element > div.slide3 div.texts h2 a { width: 700px; height: 150px; background: url(assets/img/apple_images/macpro_t.png) no-repeat 0 0; background-size: 700px 150px; } #example .frame .slide_element > div.slide3 div.texts a.watch, #example .frame .slide_element > div.slide3 div.texts a.learn { background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0; } #example .frame .slide_element > div.slide3 div.texts a.watch { background-image: url(assets/img/apple_images/watch_kf.png); } #example .frame .slide_element > div.slide4 div.texts h2 { width: 1000px; height: 132px; margin: 0 auto; margin-top: 409px; margin-bottom: 18px; } #example .frame .slide_element > div.slide4 div.texts h2 a { width: 1000px; height: 132px; background: url(assets/img/apple_images/macbooka.png) no-repeat 0 0; background-size: 1000px 132px; } #example .frame .slide_element > div.slide4 div.texts a.watch, #example .frame .slide_element > div.slide4 div.texts a.learn { background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0; } #example .frame .slide_element > div.slide4 div.texts a.watch { background-image: url(assets/img/apple_images/watch_ke.png); } #example .frame .slide_element > div.slide5 div.texts h2 { width: 900px; height: 75px; margin: 0 auto; margin-top: 290px; margin-bottom: 18px; } #example .frame .slide_element > div.slide5 div.texts h2 a { width: 900px; height: 75px; background: url(assets/img/apple_images/designed.png) no-repeat 0 0; background-size: 900px 75px; } #example .frame .slide_element > div.slide5 div.texts a.watch, #example .frame .slide_element > div.slide5 div.texts a.learn { background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0; } #example .frame .slide_element > div.slide5 div.texts a.watch { width: 224px; background-image: url(assets/img/apple_images/watch_ad.png); } #example .frame .slide_element > div.slide6 div.texts h2 { width: 480px; height: 135px; margin-left: 460px; margin-top: 260px; margin-bottom: 18px; } #example .frame .slide_element > div.slide6 div.texts h2 a { width: 480px; height: 135px; background: url(assets/img/apple_images/itunesra.png) no-repeat 0 0; background-size: 480px 135px; } #example .frame .slide_element > div.slide6 div.texts a.watch, #example .frame .slide_element > div.slide6 div.texts a.learn { background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0; } #example .frame .slide_element > div.slide6 div.texts a.learn { margin-right: 0; } #example .frame .slide_element > div.slide6 div.texts a.watch { background-image: url(assets/img/apple_images/watch_ke.png); margin-left: 420px; } #example .frame .slide_element > div.slide7 div.texts h2 { width: 600px; height: 300px; margin: 0 auto; margin-top: 200px; margin-bottom: -115px; } #example .frame .slide_element > div.slide7 div.texts h2 a { width: 600px; height: 300px; background: url(assets/img/apple_images/wwdc_tit.png) no-repeat 0 0; background-size: 600px 300px; } #example .frame .slide_element > div.slide7 div.texts a.watch { background: url(assets/img/apple_images/watch_kf.png) no-repeat 0 0; margin: 0 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> #example { background: transparent; width: 100%; height: 709px; min-width: 980px; overflow: hidden; } #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 .frame .slide_element > div.slide1, #example .frame .slide_element > div.slide6 { background: #fafafa; } #example .frame .slide_element > div.slide1 .mSCover { margin-top: 27px; margin-left: 108px; } #example .frame .slide_element > div.slide3 { background: #000; } #example .frame .slide_element > div.slide3 .mSCover { margin-top: 22px; } #example .frame .slide_element > div.slide4 .mSCover { margin-top: -304px; margin-left: -153px; } #example .frame .slide_element > div.slide6 .mSCover { margin-left: -174px; margin-top: 0; } #example .frame .slide_element div.texts { position: absolute; width: 980px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; color: #000; z-index: 1001; pointer-events: none; } #example .frame .slide_element div.texts a { pointer-events: all; } #example .frame .slide_element div.texts h2 { display: block; overflow: hidden; text-indent: -9999px; } #example .frame .slide_element div.texts h2 a { display: block; overflow: hidden; text-indent: -9999px; } #example .frame .slide_element > div.slide1 div.texts h2 { margin-top: 105px; margin-left: 39px; margin-bottom: 12px; width: 400px; } #example .frame .slide_element > div.slide1 div.texts h2 a { width: 500px; height: 194px; background: url(assets/img/apple_images/ios_titl.png) no-repeat 0 0; background-size: 500px 194px; } #example .frame .slide_element div.texts a.watch, #example .frame .slide_element div.texts a.learn { display: block; margin: 0 0 0 42px; width: 148px; height: 0; padding-top: 35px; overflow: hidden; cursor: pointer; background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0; background-size: 255px 70px; zoom: 1; } #example .frame .slide_element div.texts a.watch:hover, #example .frame .slide_element div.texts a.learn:hover { background-position: 0 100% !important; } #example .frame .slide_element div.texts a.watch { width: 255px; background-image: url(assets/img/apple_images/watch_ke.png); } #example .frame .slide_element > div.slide1 div.texts a.learn { margin-top: 4px; } #example .frame .slide_element > div.slide2 div.texts, #example .frame .slide_element > div.slide3 div.texts, #example .frame .slide_element > div.slide4 div.texts, #example .frame .slide_element > div.slide5 div.texts, #example .frame .slide_element > div.slide6 div.texts, #example .frame .slide_element > div.slide7 div.texts { text-align: center; } #example .frame .slide_element > div.slide2 div.texts h2 { width: 581px; height: 475px; margin: 0 auto; margin-top: 95px; margin-bottom: -57px; } #example .frame .slide_element > div.slide2 div.texts h2 a { width: 581px; height: 475px; background: url(assets/img/apple_images/osx_titl.png) no-repeat 0 0; background-size: 581px 475px; } #example .frame .slide_element > div.slide2 div.texts a.watch, #example .frame .slide_element > div.slide2 div.texts a.learn, #example .frame .slide_element > div.slide3 div.texts a.watch, #example .frame .slide_element > div.slide3 div.texts a.learn, #example .frame .slide_element > div.slide4 div.texts a.watch, #example .frame .slide_element > div.slide4 div.texts a.learn, #example .frame .slide_element > div.slide5 div.texts a.watch, #example .frame .slide_element > div.slide5 div.texts a.learn, #example .frame .slide_element > div.slide6 div.texts a.watch, #example .frame .slide_element > div.slide6 div.texts a.learn, #example .frame .slide_element > div.slide7 div.texts a.watch { display: inline-block; margin: 0 35px 0 0; background: url(assets/img/apple_images/learn_mq.png) no-repeat 0 0; background-size: 255px 70px; zoom: 1; } #example .frame .slide_element > div.slide2 div.texts a.watch, #example .frame .slide_element > div.slide3 div.texts a.watch, #example .frame .slide_element > div.slide4 div.texts a.watch, #example .frame .slide_element > div.slide5 div.texts a.watch { width: 255px; margin-left: 35px; background-image: url(assets/img/apple_images/watch_kg.png); } #example .frame .slide_element > div.slide3 div.texts h2 { width: 700px; height: 150px; margin: 0 auto; margin-top: 368px; margin-bottom: 4px; } #example .frame .slide_element > div.slide3 div.texts h2 a { width: 700px; height: 150px; background: url(assets/img/apple_images/macpro_t.png) no-repeat 0 0; background-size: 700px 150px; } #example .frame .slide_element > div.slide3 div.texts a.watch, #example .frame .slide_element > div.slide3 div.texts a.learn { background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0; } #example .frame .slide_element > div.slide3 div.texts a.watch { background-image: url(assets/img/apple_images/watch_kf.png); } #example .frame .slide_element > div.slide4 div.texts h2 { width: 1000px; height: 132px; margin: 0 auto; margin-top: 409px; margin-bottom: 18px; } #example .frame .slide_element > div.slide4 div.texts h2 a { width: 1000px; height: 132px; background: url(assets/img/apple_images/macbooka.png) no-repeat 0 0; background-size: 1000px 132px; } #example .frame .slide_element > div.slide4 div.texts a.watch, #example .frame .slide_element > div.slide4 div.texts a.learn { background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0; } #example .frame .slide_element > div.slide4 div.texts a.watch { background-image: url(assets/img/apple_images/watch_ke.png); } #example .frame .slide_element > div.slide5 div.texts h2 { width: 900px; height: 75px; margin: 0 auto; margin-top: 290px; margin-bottom: 18px; } #example .frame .slide_element > div.slide5 div.texts h2 a { width: 900px; height: 75px; background: url(assets/img/apple_images/designed.png) no-repeat 0 0; background-size: 900px 75px; } #example .frame .slide_element > div.slide5 div.texts a.watch, #example .frame .slide_element > div.slide5 div.texts a.learn { background: url(assets/img/apple_images/learn_mp.png) no-repeat 0 0; } #example .frame .slide_element > div.slide5 div.texts a.watch { width: 224px; background-image: url(assets/img/apple_images/watch_ad.png); } #example .frame .slide_element > div.slide6 div.texts h2 { width: 480px; height: 135px; margin-left: 460px; margin-top: 260px; margin-bottom: 18px; } #example .frame .slide_element > div.slide6 div.texts h2 a { width: 480px; height: 135px; background: url(assets/img/apple_images/itunesra.png) no-repeat 0 0; background-size: 480px 135px; } #example .frame .slide_element > div.slide6 div.texts a.watch, #example .frame .slide_element > div.slide6 div.texts a.learn { background: url(assets/img/apple_images/learn_mo.png) no-repeat 0 0; } #example .frame .slide_element > div.slide6 div.texts a.learn { margin-right: 0; } #example .frame .slide_element > div.slide6 div.texts a.watch { background-image: url(assets/img/apple_images/watch_ke.png); margin-left: 420px; } #example .frame .slide_element > div.slide7 div.texts h2 { width: 600px; height: 300px; margin: 0 auto; margin-top: 200px; margin-bottom: -115px; } #example .frame .slide_element > div.slide7 div.texts h2 a { width: 600px; height: 300px; background: url(assets/img/apple_images/wwdc_tit.png) no-repeat 0 0; background-size: 600px 300px; } #example .frame .slide_element > div.slide7 div.texts a.watch { background: url(assets/img/apple_images/watch_kf.png) no-repeat 0 0; margin: 0 auto; } </style> </head> <body> <!-- PARENT --> <div id="example" class="mightyslider_modern_skin"> <!-- FRAME --> <div class="frame"> <!-- SLIDEELEMENT --> <div class="slide_element"> <!-- SLIDES --> <div class="slide1" data-mightyslider="cover: 'assets/img/apple_images/ios_hero.png', thumbnail: 'assets/img/apple_images/ios_thum.jpg', link: { url: 'http://www.apple.com/ios/ios7/', target: '_blank' }, skin: 'black'"> <div class="texts"> <h2><a href="http://www.apple.com/ios/ios7/">iOS 7. The mobile OS from a whole new perspective.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/ios/ios7/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide2" data-mightyslider="cover: 'assets/img/apple_images/osx_hero.jpg', thumbnail: 'assets/img/apple_images/osx_thum.jpg', link: { url: 'http://www.apple.com/osx/preview/', target: '_blank' }, viewport: 'fill'"> <div class="texts"> <h2><a href="http://www.apple.com/osx/preview/">OS X Mavericks. The next big release of the world’s most advanced desktop operating system.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/osx/preview/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide3" data-mightyslider="cover: 'assets/img/apple_images/macpro_h.jpg', thumbnail: 'assets/img/apple_images/macpro_t.jpg', link: { url: 'http://www.apple.com/mac-pro/', target: '_blank' }"> <div class="texts"> <h2><a href="http://www.apple.com/mac-pro/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/mac-pro/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide4" data-mightyslider="cover: 'assets/img/apple_images/macbookb.jpg', thumbnail: 'assets/img/apple_images/macbooka.jpg', link: { url: 'http://www.apple.com/macbook-air/', target: '_blank' }, skin: 'black'"> <div class="texts"> <h2><a href="http://www.apple.com/macbook-air/">Mac Pro. A sneak peek at the future of the pro desktop.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/macbook-air/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide5" data-mightyslider="cover: 'assets/img/apple_images/designee.jpg', thumbnail: 'assets/img/apple_images/designed.jpg', link: { url: 'http://www.apple.com/designed-by-apple/', target: '_blank' }, viewport: 'fill'"> <div class="texts"> <h2><a href="http://www.apple.com/designed-by-apple/">Designed by Apple in California</a></h2> <a href="http://www.apple.com/#designed-by-apple-tv-spot" target="_blank" class="watch">Watch the TV ad</a> <a href="http://www.apple.com/designed-by-apple/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide6" data-mightyslider="cover: 'assets/img/apple_images/itunesrb.png', thumbnail: 'assets/img/apple_images/itunesra.jpg', link: { url: 'http://www.apple.com/itunes/itunes-radio/', target: '_blank' }, skin: 'black'"> <div class="texts"> <h2><a href="http://www.apple.com/itunes/itunes-radio/">iTunes Radio. Hear where your music takes you.</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> <a href="http://www.apple.com/itunes/itunes-radio/" target="_blank" class="learn">Learn more</a> </div> </div> <div class="slide7" data-mightyslider="cover: 'assets/img/apple_images/wwdc_her.jpg', thumbnail: 'assets/img/apple_images/wwdc_thu.jpg', link: { url: 'http://www.apple.com/apple-events/june-2013/', target: '_blank' }, viewport: 'fill'"> <div class="texts"> <h2><a href="http://www.apple.com/apple-events/june-2013/">WWDC 2013</a></h2> <a href="http://www.apple.com/apple-events/june-2013/" target="_blank" class="watch">Watch the keynote</a> </div> </div> </div> </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.10.2/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 $example = $('#example'), $frame = $('.frame', $example); // Calling new mightySlider class $frame.mightySlider({ speed: 1000, easing: 'easeOutExpo', viewport: 'center', // Navigation options navigation: { slideSize: '100%', keyboardNavBy: 'slides' }, // Dragging options dragging: { swingSpeed: 0.1 }, // Thumbnails options thumbnails: { thumbnailNav: 'forceCentered', activateOn: clickEvent }, // Commands options commands: { pages: 1, thumbnails: 1, buttons: 1 } }, // Register callbacks to the events { // Register mightySlider :active event callback active: function(name, index){ var skin = this.slides[index].options.skin || ''; $example.removeClass('black').addClass(skin); } }); })(); }); </script> </body> </html>