This template shows one complete slide plus four 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"> /** * Return value from percent of a number. * * @param {Number} percent * @param {Number} total * * @return {Number} */ function percentToValue(percent, total) { return parseInt((total / 100) * percent); } /** * Convert degree to radian * * @param {Number} degree * * @return {Number} */ function degreeToRadian(degree) { return ((degree - 90) * Math.PI) / 180; } 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), $slides = $('.slide_element', $frame).children(), $thumbnailsBar = $('div#thumbnails ul', $example), $timerEL = $('canvas', $example), ctx = $timerEL[0] && $timerEL[0].getContext("2d"), slideSize = '70%', lastIndex = -1; /** * Draw arc on canvas element * * @param {Number} angle * * @return {Void} */ function drawArc(angle) { var startingAngle = degreeToRadian(0), endingAngle = degreeToRadian(angle), size = 160, center = size / 2; //360Bar ctx.clearRect(0, 0, size, size); ctx.beginPath(); ctx.arc(center, center, center-4, startingAngle, endingAngle, false); ctx.lineWidth = 8; ctx.strokeStyle = "#aaa"; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath(); } // Calling mightySlider via jQuery proxy $frame.mightySlider({ speed: 1500, startAt: 2, autoScale: 1, easing: 'easeOutExpo', // Navigation options navigation: { slideSize: slideSize, keyboardNavBy: 'slides', activateOn: clickEvent }, // Thumbnails options thumbnails: { thumbnailsBar: $thumbnailsBar, thumbnailNav: 'forceCentered', activateOn: clickEvent, scrollBy: 0 }, // Dragging options dragging: { mouseDragging: 0, 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) { if (lastIndex !== index) { // Hide the timer $timerEL.stop().css({ opacity: 0 }); // Remove next and previous classes from the slides $slides.removeClass('next_1 next_2 prev_1 prev_2'); // Detect next and prev slides var next1 = this.slides[index + 1], next2 = this.slides[index + 2], prev1 = this.slides[index - 1], prev2 = this.slides[index - 2]; // Add next and previous classes to the slides next1 && $(next1.element).addClass('next_1'); next2 && $(next2.element).addClass('next_2'); prev1 && $(prev1.element).addClass('prev_1'); prev2 && $(prev2.element).addClass('prev_2'); } lastIndex = index; }, // Register mightySlider :moveEnd event callback moveEnd: function() { // Reset cycling progress time elapsed this.progressElapsed = 0; // Fade in the timer $timerEL.animate({ opacity: 1 }, 800); }, // Register mightySlider :progress event callback progress: function(name, progress) { // Draw circle bar timer based on progress drawArc(360 - (360 / 1 * progress)); }, // Register mightySlider :initialize and :resize event callback 'initialize resize': function(name) { var self = this, frameSize = self.relative.frameSize, slideSizePixel = percentToValue(slideSize.replace('%', ''), frameSize), remainedSpace = (frameSize - slideSizePixel), margin = (slideSizePixel - remainedSpace / 3) / 2; // Sets slides margin $slides.css('margin', '0 -' + margin + 'px'); // Reload immediate self.reload(1); } }); })(); }); </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 prev_2" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27898.jpg', thumbnail: 'assets/img/photos/MS-test-day-27898_thumb.jpg' "></div> <div class="slide prev_1" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27771.jpg', thumbnail: 'MS-test-day-27771_thumb.jpg' "></div> <div class="slide active" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27845.jpg', video: 'http://vimeo.com/32685545', thumbnail: 'MS-test-day-27845_thumb.jpg' "> <!-- LAYER --> <div class="mSCaption"> You can use direct video url<br />for full-sized videos & covers </div> </div> <div class="slide next_1" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27780.jpg', thumbnail: 'MS-test-day-27780_thumb.jpg' "></div> <div class="slide next_2" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27749.jpg', thumbnail: 'MS-test-day-27749_thumb.jpg' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-278081.jpg', thumbnail: 'MS-test-day-278081_thumb.jpg' "></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 TIMER --> <canvas id="progress" width="160" height="160"></canvas> <!-- END OF SLIDER TIMER --> <!-- THUMBNAILS --> <div id="thumbnails"> <div> <ul></ul> </div> </div> <!-- END OF THUMBNAILS --> </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: 30px; } #example .frame .slide_element { height: 100%; } #example .frame .slide_element .slide { float: left; height: 100%; margin: 0 -350px; opacity: 0; background: #000; z-index: 5; border-radius: 10px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transition-property: opacity, -webkit-transform; transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition-property: opacity, transform; } #example .frame .slide_element .slide.next_1, #example .frame .slide_element .slide.prev_1 { opacity: 0.7; z-index: 9; -webkit-transform: scale(0.9); transform: scale(0.9); } #example .frame .slide_element .slide.next_2, #example .frame .slide_element .slide.prev_2 { opacity: 0.4; z-index: 8; -webkit-transform: scale(0.8); transform: scale(0.8); } #example .frame .slide_element .slide.active { opacity: 1; z-index: 10; -webkit-transform: scale(1); transform: scale(1); } #example #progress { position: absolute; border-radius: 50%; margin: auto; bottom: -40px; left: 0; right: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } #example #thumbnails { display: block; text-align: center; height: 80px; } #example #thumbnails > div { height: 100%; width: 100%; } #example #thumbnails > div > ul { list-style: none; margin: 0; padding: 0; height: 100%; } #example #thumbnails > div > ul > li { width: 80px; height: 80px; margin: 0 5px; cursor: pointer; padding: 3px; border: 4px transparent solid; border-radius: 50%; opacity: 0.6; } #example #thumbnails > div > ul > li img { width: 100%; height: 100%; border-radius: 50%; } #example #thumbnails > div > ul > li.active { opacity: 1; } #example .mSButtons.mSPrev { left: 15%; right: auto; bottom: 30px; } #example .mSButtons.mSNext { right: 15%; 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; } </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: 30px; } #example .frame .slide_element { height: 100%; } #example .frame .slide_element .slide { float: left; height: 100%; margin: 0 -350px; opacity: 0; background: #000; z-index: 5; border-radius: 10px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transition-property: opacity, -webkit-transform; transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition-property: opacity, transform; } #example .frame .slide_element .slide.next_1, #example .frame .slide_element .slide.prev_1 { opacity: 0.7; z-index: 9; -webkit-transform: scale(0.9); transform: scale(0.9); } #example .frame .slide_element .slide.next_2, #example .frame .slide_element .slide.prev_2 { opacity: 0.4; z-index: 8; -webkit-transform: scale(0.8); transform: scale(0.8); } #example .frame .slide_element .slide.active { opacity: 1; z-index: 10; -webkit-transform: scale(1); transform: scale(1); } #example #progress { position: absolute; border-radius: 50%; margin: auto; bottom: -40px; left: 0; right: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } #example #thumbnails { display: block; text-align: center; height: 80px; } #example #thumbnails > div { height: 100%; width: 100%; } #example #thumbnails > div > ul { list-style: none; margin: 0; padding: 0; height: 100%; } #example #thumbnails > div > ul > li { width: 80px; height: 80px; margin: 0 5px; cursor: pointer; padding: 3px; border: 4px transparent solid; border-radius: 50%; opacity: 0.6; } #example #thumbnails > div > ul > li img { width: 100%; height: 100%; border-radius: 50%; } #example #thumbnails > div > ul > li.active { opacity: 1; } #example .mSButtons.mSPrev { left: 15%; right: auto; bottom: 30px; } #example .mSButtons.mSNext { right: 15%; 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; } </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 prev_2" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27898.jpg', thumbnail: 'assets/img/photos/MS-test-day-27898_thumb.jpg' "></div> <div class="slide prev_1" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27771.jpg', thumbnail: 'MS-test-day-27771_thumb.jpg' "></div> <div class="slide active" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27845.jpg', video: 'http://vimeo.com/32685545', thumbnail: 'MS-test-day-27845_thumb.jpg' "> <!-- LAYER --> <div class="mSCaption"> You can use direct video url<br />for full-sized videos & covers </div> </div> <div class="slide next_1" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27780.jpg', thumbnail: 'MS-test-day-27780_thumb.jpg' "></div> <div class="slide next_2" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-27749.jpg', thumbnail: 'MS-test-day-27749_thumb.jpg' "></div> <div class="slide" data-mightyslider=" cover: 'assets/img/photos/MS-test-day-278081.jpg', thumbnail: 'MS-test-day-278081_thumb.jpg' "></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 TIMER --> <canvas id="progress" width="160" height="160"></canvas> <!-- END OF SLIDER TIMER --> <!-- THUMBNAILS --> <div id="thumbnails"> <div> <ul></ul> </div> </div> <!-- END OF THUMBNAILS --> </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"> /** * Return value from percent of a number. * * @param {Number} percent * @param {Number} total * * @return {Number} */ function percentToValue(percent, total) { return parseInt((total / 100) * percent); } /** * Convert degree to radian * * @param {Number} degree * * @return {Number} */ function degreeToRadian(degree) { return ((degree - 90) * Math.PI) / 180; } 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), $slides = $('.slide_element', $frame).children(), $thumbnailsBar = $('div#thumbnails ul', $example), $timerEL = $('canvas', $example), ctx = $timerEL[0] && $timerEL[0].getContext("2d"), slideSize = '70%', lastIndex = -1; /** * Draw arc on canvas element * * @param {Number} angle * * @return {Void} */ function drawArc(angle) { var startingAngle = degreeToRadian(0), endingAngle = degreeToRadian(angle), size = 160, center = size / 2; //360Bar ctx.clearRect(0, 0, size, size); ctx.beginPath(); ctx.arc(center, center, center-4, startingAngle, endingAngle, false); ctx.lineWidth = 8; ctx.strokeStyle = "#aaa"; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath(); } // Calling mightySlider via jQuery proxy $frame.mightySlider({ speed: 1500, startAt: 2, autoScale: 1, easing: 'easeOutExpo', // Navigation options navigation: { slideSize: slideSize, keyboardNavBy: 'slides', activateOn: clickEvent }, // Thumbnails options thumbnails: { thumbnailsBar: $thumbnailsBar, thumbnailNav: 'forceCentered', activateOn: clickEvent, scrollBy: 0 }, // Dragging options dragging: { mouseDragging: 0, 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) { if (lastIndex !== index) { // Hide the timer $timerEL.stop().css({ opacity: 0 }); // Remove next and previous classes from the slides $slides.removeClass('next_1 next_2 prev_1 prev_2'); // Detect next and prev slides var next1 = this.slides[index + 1], next2 = this.slides[index + 2], prev1 = this.slides[index - 1], prev2 = this.slides[index - 2]; // Add next and previous classes to the slides next1 && $(next1.element).addClass('next_1'); next2 && $(next2.element).addClass('next_2'); prev1 && $(prev1.element).addClass('prev_1'); prev2 && $(prev2.element).addClass('prev_2'); } lastIndex = index; }, // Register mightySlider :moveEnd event callback moveEnd: function() { // Reset cycling progress time elapsed this.progressElapsed = 0; // Fade in the timer $timerEL.animate({ opacity: 1 }, 800); }, // Register mightySlider :progress event callback progress: function(name, progress) { // Draw circle bar timer based on progress drawArc(360 - (360 / 1 * progress)); }, // Register mightySlider :initialize and :resize event callback 'initialize resize': function(name) { var self = this, frameSize = self.relative.frameSize, slideSizePixel = percentToValue(slideSize.replace('%', ''), frameSize), remainedSpace = (frameSize - slideSizePixel), margin = (slideSizePixel - remainedSpace / 3) / 2; // Sets slides margin $slides.css('margin', '0 -' + margin + 'px'); // Reload immediate self.reload(1); } }); })(); }); </script> </body> </html>