mightySlider supports YouTube, Vimeo, Metacafe, Dailymotion, Twitvid and HTML5 videos and there is options to add custom players (includes example with mediaelementjs integration for HTML version).
You can also add iframe of video directly inside slide, but it'll block touch navigation on some devices and transition between slides will be not so smooth.
Despite that this example is called video slider, but you can put anything inside each slide.
Also, you can enable permalinks to link to specific slide by url, like here.
<⁄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 $example = $('#example'), $parent = $('.mightyslider_modern_skin', $example), $tabs = $('.tabs ul', $example), $frame = $('.frame', $example); // Calling mightySlider via jQuery proxy $frame.mightySlider({ speed: 1000, autoScale: 'easeOutExpo', easing: 'easeOutExpo', // Navigation options navigation: { slideSize: '100%' }, // Thumbnails options thumbnails: { horizontal: 0, preloadThumbnails: 0, activateOn: clickEvent, thumbnailsBar: $tabs, thumbnailBuilder: function (index, thumbnail) { return '<li><h3>' + this.slides[index].options.title + '</h3>by ' + this.slides[index].options.owner + '</li>'; } }, // Commands options commands: { 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>
<div id="example"> <div> <div class="tabs"> <ul></ul> </div> </div> <!-- PARENT --> <div class="mightyslider_modern_skin"> <div class="frame" data-mightyslider=" width: 871, height: 490 "> <!-- SLIDEELEMENT --> <div class="slide_element"> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/67714341', owner: 'Sebastian Linda', title: 'Dresden Elbe Hochwasser - 5 Juni 2013' "> <div class="mSCaption caption caption1" data-msanimation="{ speed: 300, style: { top: 370, opacity: 1 } }"> You can use direct video url<br>for full-sized videos & covers </div> </div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/70245817_1280.jpg', mp4: 'http://mightyslider.com/video/25627414.mp4', webm: 'http://mightyslider.com/video/25627414.webm', videoFrame: 'src/videoframes/mediaelementjs.php', owner: 'Colin Hesterly', title: 'The Empire' "> <div class="mSCaption caption caption2" data-msanimation="{ speed: 300, style: { top: 370, opacity: 1 } }"> HTML5 VIDEO custom video player </div> <div class="mSCaption caption caption3" data-msanimation="{ delay: 300, speed: 300, style: { width: 80, height: 80, top: 355, left: 344, fontSize: 76, opacity: 1 } }"> & </div> </div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/62855297', owner: 'GOBELINS pro', title: 'Eclipse', skin: 'black' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/14773535', owner: 'Colin Hesterly', title: 'World Of Motion' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/64504343', owner: 'Sebastian Linda', title: '60 Minutes in a Skateboarder´s Life' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/69445362', owner: 'Simon Christen', title: 'Adrift' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/41709203', owner: 'Sebastian Linda', title: 'Battle of germany´s best B-boy´s - Red Bull Bc One Cypher Germany 2012' "></div> </div> <!-- END OF SLIDEELEMENT --> </div> <!-- END OF FRAME --> </div> <!-- END OF PARENT --> </div>
</head>
<style> #example { position: relative; background: #000; } #example .mightyslider_modern_skin { margin-right: 299px; } #example .frame { width: 100%; height: 500px; } #example .frame .slide_element { height: 100%; } #example .frame .slide_element > div { float: left; height: 100%; } #example .frame .mSCover img { max-width: none; } #example .tabs { position: absolute; width: 299px; height: 100%; right: 0; background: #2E2E2E; } #example .tabs ul { width: 100%; margin: 0; padding: 0; } #example .tabs ul li { background: #2E2E2E; width: 100%; cursor: pointer; padding: 15px 10px; border-bottom: #333 1px solid; color: #5a5a5a; font-weight: 300; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -moz-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -ms-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -o-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } #example .tabs ul li:last-of-type { border-bottom: 0; } #example .tabs ul li h3 { font-size: 18px; line-height: 18px; font-weight: 400; margin: 0; margin-bottom: 10px; } #example .tabs ul li:hover { background: #000; color: #999; } #example .tabs ul li:hover h3 { color: #FFF; } #example .tabs ul li.active { background: #080; color: #FFF; } #example .caption { font-size: 26px; line-height: normal; font-weight: 300; text-shadow:0px 0px 0 rgb(208,208,208), 1px 1px 0 rgb(170,170,170),2px 2px 1px rgba(0,0,0,0.05),2px 2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2); color: #FFF; opacity: 0; letter-spacing: -1px; white-space: nowrap; text-align: center; z-index: 1002; text-transform: uppercase; text-align: center; } #example .caption1 { font-size: 20px; top: 390px; left: 80px; text-shadow: rgba(0,0,0,0.7) 0 1px 0px; text-align: left; word-spacing: 4px; line-height: 100%; } #example .caption2 { top: 390px; left: 180px; background: rgba(0,0,0,0.4); padding: 10px 20px; border-radius: 100px; } #example .caption3 { width: 166px; height: 166px; line-height: normal; font-size: 166px; font-family: Times; top: 300px; left: 300px; } /* Responsive Improvements */ @media (min-width: 980px) and (max-width: 1199px) { #example .mightyslider_modern_skin { margin-right: 239px; } #example .tabs { width: 239px; } #example .tabs ul li h3 { font-size: 14px; line-height: 14px; } } @media (max-width: 979px) { #example .mightyslider_modern_skin { margin-right: 182px; } #example .tabs { width: 182px; } #example .tabs ul li h3 { font-size: 11px; line-height: 11px; } } @media (max-width: 767px) { .marketing2 { margin-left: -20px; margin-right: -20px; } } @media (max-width: 480px) { #example .mightyslider_modern_skin { margin-right: 0; } #example .tabs { 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> #example { position: relative; background: #000; } #example .mightyslider_modern_skin { margin-right: 299px; } #example .frame { width: 100%; height: 500px; } #example .frame .slide_element { height: 100%; } #example .frame .slide_element > div { float: left; height: 100%; } #example .frame .mSCover img { max-width: none; } #example .tabs { position: absolute; width: 299px; height: 100%; right: 0; background: #2E2E2E; } #example .tabs ul { width: 100%; margin: 0; padding: 0; } #example .tabs ul li { background: #2E2E2E; width: 100%; cursor: pointer; padding: 15px 10px; border-bottom: #333 1px solid; color: #5a5a5a; font-weight: 300; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -moz-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -ms-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -o-transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: background 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } #example .tabs ul li:last-of-type { border-bottom: 0; } #example .tabs ul li h3 { font-size: 18px; line-height: 18px; font-weight: 400; margin: 0; margin-bottom: 10px; } #example .tabs ul li:hover { background: #000; color: #999; } #example .tabs ul li:hover h3 { color: #FFF; } #example .tabs ul li.active { background: #080; color: #FFF; } #example .caption { font-size: 26px; line-height: normal; font-weight: 300; text-shadow:0px 0px 0 rgb(208,208,208), 1px 1px 0 rgb(170,170,170),2px 2px 1px rgba(0,0,0,0.05),2px 2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2); color: #FFF; opacity: 0; letter-spacing: -1px; white-space: nowrap; text-align: center; z-index: 1002; text-transform: uppercase; text-align: center; } #example .caption1 { font-size: 20px; top: 390px; left: 80px; text-shadow: rgba(0,0,0,0.7) 0 1px 0px; text-align: left; word-spacing: 4px; line-height: 100%; } #example .caption2 { top: 390px; left: 180px; background: rgba(0,0,0,0.4); padding: 10px 20px; border-radius: 100px; } #example .caption3 { width: 166px; height: 166px; line-height: normal; font-size: 166px; font-family: Times; top: 300px; left: 300px; } /* Responsive Improvements */ @media (min-width: 980px) and (max-width: 1199px) { #example .mightyslider_modern_skin { margin-right: 239px; } #example .tabs { width: 239px; } #example .tabs ul li h3 { font-size: 14px; line-height: 14px; } } @media (max-width: 979px) { #example .mightyslider_modern_skin { margin-right: 182px; } #example .tabs { width: 182px; } #example .tabs ul li h3 { font-size: 11px; line-height: 11px; } } @media (max-width: 767px) { .marketing2 { margin-left: -20px; margin-right: -20px; } } @media (max-width: 480px) { #example .mightyslider_modern_skin { margin-right: 0; } #example .tabs { display: none; } } </style> </head> <body> <div id="example"> <div> <div class="tabs"> <ul></ul> </div> </div> <!-- PARENT --> <div class="mightyslider_modern_skin"> <div class="frame" data-mightyslider=" width: 871, height: 490 "> <!-- SLIDEELEMENT --> <div class="slide_element"> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/67714341', owner: 'Sebastian Linda', title: 'Dresden Elbe Hochwasser - 5 Juni 2013' "> <div class="mSCaption caption caption1" data-msanimation="{ speed: 300, style: { top: 370, opacity: 1 } }"> You can use direct video url<br>for full-sized videos & covers </div> </div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/70245817_1280.jpg', mp4: 'http://mightyslider.com/video/25627414.mp4', webm: 'http://mightyslider.com/video/25627414.webm', videoFrame: 'src/videoframes/mediaelementjs.php', owner: 'Colin Hesterly', title: 'The Empire' "> <div class="mSCaption caption caption2" data-msanimation="{ speed: 300, style: { top: 370, opacity: 1 } }"> HTML5 VIDEO custom video player </div> <div class="mSCaption caption caption3" data-msanimation="{ delay: 300, speed: 300, style: { width: 80, height: 80, top: 355, left: 344, fontSize: 76, opacity: 1 } }"> & </div> </div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/62855297', owner: 'GOBELINS pro', title: 'Eclipse', skin: 'black' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/14773535', owner: 'Colin Hesterly', title: 'World Of Motion' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/64504343', owner: 'Sebastian Linda', title: '60 Minutes in a Skateboarder´s Life' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/69445362', owner: 'Simon Christen', title: 'Adrift' "></div> <div class="slide" data-mightyslider=" video: 'http://vimeo.com/41709203', owner: 'Sebastian Linda', title: 'Battle of germany´s best B-boy´s - Red Bull Bc One Cypher Germany 2012' "></div> </div> <!-- END OF SLIDEELEMENT --> </div> <!-- END OF FRAME --> </div> <!-- END OF PARENT --> </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> <!-- mightySlider layers animation engine --> <script type="text/javascript" src="mightyslider/src/js/tweenlite.js"></script> <!-- Main slider JS script file --> <script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { var isTouch = !!('ontouchstart' in window), clickEvent = isTouch ? 'tap' : 'click'; (function(){ // Global slider's DOM elements var $example = $('#example'), $parent = $('.mightyslider_modern_skin', $example), $tabs = $('.tabs ul', $example), $frame = $('.frame', $example); // Calling mightySlider via jQuery proxy $frame.mightySlider({ speed: 1000, autoScale: 'easeOutExpo', easing: 'easeOutExpo', // Navigation options navigation: { slideSize: '100%' }, // Thumbnails options thumbnails: { horizontal: 0, preloadThumbnails: 0, activateOn: clickEvent, thumbnailsBar: $tabs, thumbnailBuilder: function (index, thumbnail) { return '<li><h3>' + this.slides[index].options.title + '</h3>by ' + this.slides[index].options.owner + '</li>'; } }, // Commands options commands: { 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>