"slider"
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 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/joshua_ward/pen/MEbjJb?limit=all&page=34&q=gallery" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Amatic+SC'> <style class="cp-pen-styles">html { box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; } .panels .panel { background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); color: white; text-align: center; align-items: center; transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; justify-content: center; align-items: center; display: flex; flex-direction: column; cursor: pointer; } .panels .panel.panel1 { background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panels .panel.panel2 { background-image: url(https://static.pexels.com/photos/544115/pexels-photo-544115.jpeg); } .panels .panel.panel3 { background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } .panels .panel.panel4 { background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panels .panel.panel5 { background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panels .panel > * { margin: 0; width: 100%; transition: transform 0.5s; flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } .panels .panel > *:first-child { transform: translateY(-100%); } .panels .panel > *:last-child { transform: translateY(100%); } .panels .panel.open-active > *:first-child { transform: translateY(0); } .panels .panel.open-active > *:last-child { transform: translateY(0); } .panels .panel.open { font-size: 40px; flex: 5; } .panels .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; } .panels .panel p:nth-child(2) { font-size: 4em; } .cta { color: white; text-decoration: none; } </style></head><body> <div class="panels"> <div class="panel panel1"> <p>Hey</p> <p>Let's</p> <p>Dance</p> </div> <div class="panel panel2"> <p>Give</p> <p>Take</p> <p>Receive</p> </div> <div class="panel panel3"> <p>Experience</p> <p>It</p> <p>Today</p> </div> <div class="panel panel4"> <p>Give</p> <p>All</p> <p>You can</p> </div> <div class="panel panel5"> <p>Life</p> <p>In</p> <p>Motion</p> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >const panels = document.querySelectorAll('.panel'); function toggleOpen() { this.classList.toggle('open'); } function toggleActive(e) { if (e.propertyName.includes('flex')) { this.classList.toggle('open-active'); } } panels.forEach(panel => panel.addEventListener('click',toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend',toggleActive)); //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Kit Pro
Client or Partners Logo Slider
Timely Login slider
tabbed macbook mockup slider

Questions / Comments: