This template shows one complete slide plus two partial of nearby slides at a same time which it increases the interest of seeing other slides by the visitors.
As usual you can simply use videos or images in any sizes or insert multiple animated layers over each slide, or add bullets, thumbnails or tabs.
Each slide takes a unique html value. It also can be used with auto playing feature.
The beautiful photos are by MARCUS ERIKSSON and you can see his website here: http://marcuseriksson.net/
<⁄body>
<script type="text/javascript"> /** * Get viewport/window size (width and height). * * @return {Object} */ function getViewport() { var e = window, a = 'inner'; if (!('innerWidth' in window)) { a = 'client'; e = document.documentElement || document.body; } return { width: e[a + 'Width'], height: e[a + 'Height'] } } 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 = '50%'; if (width <= 480) { percent = '60%'; } else if (width <= 767) { percent = '55%'; } return percent; }; // Global slider's DOM elements var $example = $('#example'), $frame = $('.frame', $example), $details = $('div.details', $example), $title = $('#title', $details), $photographer = $('#photographer', $details), $description = $('#description', $details), lastIndex = -1; // Calling new mightySlider class var slider = new mightySlider($frame, { speed: 1000, startAt: 1, autoScale: 1, easing: 'easeOutExpo', // Navigation options navigation: { slideSize: calculator(getViewport().width), keyboardNavBy: 'slides', activateOn: clickEvent }, // Dragging options dragging: { swingSpeed: 0.12, onePage: 1 }, // Buttons options buttons: !isTouch ? { prev: $('a.mSPrev', $frame), next: $('a.mSNext', $frame) } : {}, // Cycling options cycling: { cycleBy: 'slides' } }, // Register callbacks to the events { // Register mightySlider :active event callback active: function(name, index) { var slideOptions = this.slides[index].options; if (lastIndex !== index) $details.stop().animate({ opacity: 0 }, 500, function(){ $title.html(slideOptions.title); $photographer.html(slideOptions.photographer); $description.html(slideOptions.description); $details.animate({ opacity: 1 }, 500); }); lastIndex = index; } }).init(); // Register window :resize event callback $win.resize(function(){ // Update slider options using 'set' method slider.set({ navigation: { slideSize: calculator(getViewport().width) } }); }); })(); }); </script>
<!-- PARENT --> <div id="example" class="mightyslider_modern_skin black"> <!-- FRAME --> <div class="frame" data-mightyslider=" width: 1585, height: 500 "> <!-- SLIDEELEMENT --> <div class="slide_element"> <!-- SLIDES --> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27898.jpg', title: 'Neque porro quisquam est qui', photographer: 'MARCUS ERIKSSON', description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.' "></div> <div class="slide active" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27771.jpg', title: 'Integer viverra felis a nisl volutpat placerat', photographer: 'MARCUS ERIKSSON', description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27845.jpg', video: 'http://vimeo.com/32685545', title: 'Donec dignissim est ut ligula', photographer: 'MARCUS ERIKSSON', description: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.' "> <!-- LAYER --> <div class="mSCaption"> You can use direct video url<br />for full-sized videos & covers </div> </div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27780.jpg', title: 'Neque porro quisquam est qui', photographer: 'MARCUS ERIKSSON', description: 'Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27749.jpg', title: 'Integer viverra felis a nisl volutpat placera', photographer: 'MARCUS ERIKSSON', description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-278081.jpg', title: 'Donec dignissim est ut ligula', photographer: 'MARCUS ERIKSSON', description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.' "></div> <!-- END OF SLIDES --> </div> <!-- END OF SLIDEELEMENT --> <!-- ARROW BUTTONS --> <a class="mSButtons mSPrev"></a> <a class="mSButtons mSNext"></a> </div> <!-- END OF FRAME --> <!-- SLIDER DETAILS (TITLE, PHOTOGRAPHER AND DESCRIPTION) --> <div class="details"> <h3 id="title"></h3> <h4 id="photographer"></h4> <p id="description"></p> </div> </div> <!-- END OF PARENT -->
</head>
<style> #example { position: relative; overflow: hidden; margin-top: 61px; background: transparent; } #example .frame { position: relative; width: 100%; padding: 20px 0; padding-bottom: 50px; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } #example .frame .slide_element { height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #example .frame .slide_element .slide { float: left; height: 100%; margin-right: 20px; opacity: 0.6; background: #000; z-index: 9; border-radius: 10px; -webkit-box-reflect: below 0 -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.9, transparent), to(rgba(255, 255, 255, 0.498039))); -webkit-transform: translateZ(-150px); transform: translateZ(-150px); -webkit-transition: -webkit-transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transition-property: opacity, -webkit-transform; transition: transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition-property: opacity, transform; } #example .frame .slide_element .slide.active { opacity: 1; z-index: 10; -webkit-transform: translateZ(0); transform: translateZ(0); } .ie #example .frame .slide_element .slide { margin-right: -70px; transform: scale(0.85); } .ie #example .frame .slide_element .slide.active { transform: scale(1); } #example .details { display: block; text-align: center; padding: 20px; padding-top: 0; opacity: 0; min-height: 114px; margin-top: -20px; } #example .details h3 { text-transform: uppercase; font-size: 32px; font-weight: 300; margin: 0; } #example .details h4#photographer { text-transform: uppercase; color: #7A7A7A; } #example .details #description { color: #3D3D3D; } #example .mSButtons.mSPrev { left: 25%; right: auto; bottom: 30px; } #example .mSButtons.mSNext { right: 25%; left: auto; bottom: 30px; } #example.isTouch .mSButtons { display: none; } #example .mSCaption { left: 20px; bottom: 40px; font-size: 18px; line-height: normal; font-weight: 300; color: #000; opacity: 0; letter-spacing: -1px; white-space: nowrap; text-transform: uppercase; z-index: 1002; -webkit-transition: all 0.3s; transition: all 0.3s; } #example .mSCaption.showed { bottom: 20px; opacity: 1; } /* Responsive Improvements */ @media (max-width: 480px) { #example .frame .slide_element .slide { margin-right: 0; } .ie #example .frame .slide_element .slide { margin-right: -40px; } } </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; overflow: hidden; margin-top: 61px; background: transparent; } #example .frame { position: relative; width: 100%; padding: 20px 0; padding-bottom: 50px; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } #example .frame .slide_element { height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #example .frame .slide_element .slide { float: left; height: 100%; margin-right: 20px; opacity: 0.6; background: #000; z-index: 9; border-radius: 10px; -webkit-box-reflect: below 0 -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.9, transparent), to(rgba(255, 255, 255, 0.498039))); -webkit-transform: translateZ(-150px); transform: translateZ(-150px); -webkit-transition: -webkit-transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transition-property: opacity, -webkit-transform; transition: transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition-property: opacity, transform; } #example .frame .slide_element .slide.active { opacity: 1; z-index: 10; -webkit-transform: translateZ(0); transform: translateZ(0); } .ie #example .frame .slide_element .slide { margin-right: -70px; transform: scale(0.85); } .ie #example .frame .slide_element .slide.active { transform: scale(1); } #example .details { display: block; text-align: center; padding: 20px; padding-top: 0; opacity: 0; min-height: 114px; margin-top: -20px; } #example .details h3 { text-transform: uppercase; font-size: 32px; font-weight: 300; margin: 0; } #example .details h4#photographer { text-transform: uppercase; color: #7A7A7A; } #example .details #description { color: #3D3D3D; } #example .mSButtons.mSPrev { left: 25%; right: auto; bottom: 30px; } #example .mSButtons.mSNext { right: 25%; left: auto; bottom: 30px; } #example.isTouch .mSButtons { display: none; } #example .mSCaption { left: 20px; bottom: 40px; font-size: 18px; line-height: normal; font-weight: 300; color: #000; opacity: 0; letter-spacing: -1px; white-space: nowrap; text-transform: uppercase; z-index: 1002; -webkit-transition: all 0.3s; transition: all 0.3s; } #example .mSCaption.showed { bottom: 20px; opacity: 1; } /* Responsive Improvements */ @media (max-width: 480px) { #example .frame .slide_element .slide { margin-right: 0; } .ie #example .frame .slide_element .slide { margin-right: -40px; } } </style> </head> <body> <!-- PARENT --> <div id="example" class="mightyslider_modern_skin black"> <!-- FRAME --> <div class="frame" data-mightyslider=" width: 1585, height: 500 "> <!-- SLIDEELEMENT --> <div class="slide_element"> <!-- SLIDES --> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27898.jpg', title: 'Neque porro quisquam est qui', photographer: 'MARCUS ERIKSSON', description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.' "></div> <div class="slide active" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27771.jpg', title: 'Integer viverra felis a nisl volutpat placerat', photographer: 'MARCUS ERIKSSON', description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27845.jpg', video: 'http://vimeo.com/32685545', title: 'Donec dignissim est ut ligula', photographer: 'MARCUS ERIKSSON', description: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.' "> <!-- LAYER --> <div class="mSCaption"> You can use direct video url<br />for full-sized videos & covers </div> </div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27780.jpg', title: 'Neque porro quisquam est qui', photographer: 'MARCUS ERIKSSON', description: 'Nullam volutpat purus vel eleifend venenatis. Nulla bibendum mi sit amet elit convallis imperdiet.' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27749.jpg', title: 'Integer viverra felis a nisl volutpat placera', photographer: 'MARCUS ERIKSSON', description: 'Integer viverra felis a nisl volutpat placerat. Donec et lorem mauris.' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-278081.jpg', title: 'Donec dignissim est ut ligula', photographer: 'MARCUS ERIKSSON', description: 'Proin pellentesque urna nulla. Nunc sed turpis semper, fermentum ipsum quis, ornare enim. Proin ut augue enim.' "></div> <!-- END OF SLIDES --> </div> <!-- END OF SLIDEELEMENT --> <!-- ARROW BUTTONS --> <a class="mSButtons mSPrev"></a> <a class="mSButtons mSNext"></a> </div> <!-- END OF FRAME --> <!-- SLIDER DETAILS (TITLE, PHOTOGRAPHER AND DESCRIPTION) --> <div class="details"> <h3 id="title"></h3> <h4 id="photographer"></h4> <p id="description"></p> </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> <!-- 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"> /** * Get viewport/window size (width and height). * * @return {Object} */ function getViewport() { var e = window, a = 'inner'; if (!('innerWidth' in window)) { a = 'client'; e = document.documentElement || document.body; } return { width: e[a + 'Width'], height: e[a + 'Height'] } } 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 = '50%'; if (width <= 480) { percent = '60%'; } else if (width <= 767) { percent = '55%'; } return percent; }; // Global slider's DOM elements var $example = $('#example'), $frame = $('.frame', $example), $details = $('div.details', $example), $title = $('#title', $details), $photographer = $('#photographer', $details), $description = $('#description', $details), lastIndex = -1; // Calling new mightySlider class var slider = new mightySlider($frame, { speed: 1000, startAt: 1, autoScale: 1, easing: 'easeOutExpo', // Navigation options navigation: { slideSize: calculator(getViewport().width), keyboardNavBy: 'slides', activateOn: clickEvent }, // Dragging options dragging: { swingSpeed: 0.12, onePage: 1 }, // Buttons options buttons: !isTouch ? { prev: $('a.mSPrev', $frame), next: $('a.mSNext', $frame) } : {}, // Cycling options cycling: { cycleBy: 'slides' } }, // Register callbacks to the events { // Register mightySlider :active event callback active: function(name, index) { var slideOptions = this.slides[index].options; if (lastIndex !== index) $details.stop().animate({ opacity: 0 }, 500, function(){ $title.html(slideOptions.title); $photographer.html(slideOptions.photographer); $description.html(slideOptions.description); $details.animate({ opacity: 1 }, 500); }); lastIndex = index; } }).init(); // Register window :resize event callback $win.resize(function(){ // Update slider options using 'set' method slider.set({ navigation: { slideSize: calculator(getViewport().width) } }); }); })(); }); </script> </body> </html>