"slide"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/akhil_001/pen/eJwZyK?limit=all&page=21&q=slide" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style class="cp-pen-styles">body { background-image: url("https://codepen.io/quasimondo/pen/lDdrF/image/large.png"); background-position: middle; color: black; font-family: Centaur; font-size: 24px; overflow: hidden; } body h1 { font-size: 72px; font-family: Centaur; margin: 10px; line-height: 1.5em; } div.slide { width: 500px; height: 100%; background: rgba(255, 255, 255, 0.15); padding: 50px; margin-left: -300px; position: absolute; left: 50%; -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s; } div.slide.next { opacity: 0.6; left: 75%; -webkit-transform: scale(0.75, 0.75); -moz-transform: scale(0.75, 0.75); -ms-transform: scale(0.75, 0.75); -o-transform: scale(0.75, 0.75); transform: scale(0.75, 0.75); -webkit-filter: blur(15px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } img { width: 300px; } div.slide.future { opacity: 1; left: 20%; -webkit-transform: scale(0.5, 0.5); -moz-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -webkit-filter: blur(10px); -moz-filter: blur(10px); -ms-filter: blur(10px); -o-filter: blur(10px); filter: blur(10px); } div.slide.prev { opacity: 0.6; left: 10%; -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } div.slide:nth-child(7) { z-index: -7; } div.slide:nth-child(6) { z-index: -6; } div.slide:nth-child(5) { z-index: -5; } div.slide:nth-child(4) { z-index: -4; } div.slide:nth-child(3) { z-index: -3; } div.slide:nth-child(2) { z-index: -2; } div.slide:nth-child(1) { z-index: -1; } div.controls { position: absolute; bottom: 0; text-align: center; width: 300px; margin-left: -150px; left: 50%; } div.controls span.current { font-size: 2rem; font-family: centaur; margin: 0 10px; line-height: 1.5em; display: inline-block; vertical-align: middle; } div.controls a { display: inline-block; vertical-align: middle; width: 0; height: 0; overflow: hidden; text-indent: -100px; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; } div.controls a.prev { border-right: 0.8rem solid #189; } div.controls a.next { border-left: 0.8rem solid #389; } </style></head><body> <html> <head> <meta charset="UTF-8"> <title>Slideshow presentation</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="slide" id="slide-1"> <h1>Slide Show</h1> <p>An excellent way to present your slides </p> <p> BY </br> CH AKHIL SAI </br> akhil_001</p> </div> <div class="slide" id="slide-2"> <h1>Slide 1</h1> I am a beginner. I am learning a lot from codepen community's pens and posts. Lucky to be here </div> <div class="slide" id="slide-3"> <h1>Slide 2</h1> Can insert gif images! <img src="https://d13yacurqjgara.cloudfront.net/users/652746/screenshots/2539116/hotellook_gif_swipes_color.gif" </img> </div> <div class="slide" id="slide-4"> <h1>Slide 3</h1> Inspired from windows7 alt+tab effect </div> <div class="slide" id="slide-5"> <h1>Slide 4</h1> Transition effect using LESS </div> <div class="slide" id="slide-6">Thank You </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >function slideshow() { /* Start constructor */ var show = this; show.currentslide = 0; show.maxslides = $('div.slide').size(); show.controls = document.createElement("div"); show.controls.className = "controls"; show.controls.prev = document.createElement("a"); show.controls.prev.innerHTML = "Previous"; show.controls.prev.className = "prev"; show.controls.prev.href = "Javascript:;"; show.controls.current = document.createElement("span"); show.controls.current.innerHTML = "0/0"; show.controls.current.className = "current"; show.controls.next = document.createElement("a"); show.controls.next.innerHTML = "Next"; show.controls.next.className = "next"; show.controls.next.href = "Javascript:;"; show.controls.appendChild(show.controls.prev); show.controls.appendChild(show.controls.current); show.controls.appendChild(show.controls.next); document.body.appendChild(show.controls); $(show.controls.prev).click(function() { show.prev() }); $(show.controls.next).click(function() { show.next() }); $(document).keyup(function(event) { console.log(event.which); if (event.which == 39) { show.next(); } else if (event.which == 37) { show.prev(); } }); /* End constructor */ show.slide = function() { console.log(show.currentslide); show.controls.current.innerHTML = (show.currentslide + 1) + "/" + show.maxslides; $('div.slide').each(function(index) { if (index == show.currentslide) { //current this.className = "slide"; } else if (index == (show.currentslide + 1)) { //next this.className = "slide next"; } else if (index < show.currentslide) { //prev this.className = "slide prev"; } else { //future this.className = "slide future"; } }); }; show.next = function() { show.currentslide++; if (show.currentslide == show.maxslides) { show.currentslide = 0; } if (show.currentslide >= show.maxslides) { show.currentslide--; } show.slide(); }; show.prev = function() { show.currentslide--; if (show.currentslide < 0) { show.currentslide++; } show.slide(); }; } var show = new slideshow(); show.slide(); //# sourceURL=pen.js </script> </body></html>

Related: See More

Gaia Bootstrap Template
Mega menu slide down on hover with carousel
Slide dropdown navigation
Shoji Layout: Slide-in Side Panels for XS Viewports

Questions / Comments: