"slide"
Bootstrap 3.0.0 Snippet by evarevirus

<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/baarte/pen/LGEmQg?depth=everything&order=popularity&page=49&q=translate&show_forks=false" /> <style class="cp-pen-styles">* { box-sizing: border-box; } body { margin: 0; width: 100%; height: 100%; background-color: #fff; color: #fff; font-family: "Perpetua", serif; } .slideshow { width: 100%; height: 100vh; position: relative; overflow: hidden; } .slideshow__contentWrap { width: 500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; } .slideshow__title { font-size: 4em; margin: 0; font-weight: 100; } .slideshow__text { font-size: 1em; line-height: 1.5; font-weight: 100; font-family: "Century Gothic", sans-serif; } .slideshow__container { display: block; list-style: none; position: relative; white-space: nowrap; height: 100%; width: 100%; padding: 0; margin: 0; font-size: 0; } .slideshow__item { display: inline-block; position: relative; width: 100%; height: 100%; } .slideshow__image { display: block; position: relative; height: auto; width: 100%; background-size: contain; } .slideshow__slidein { height: 100px; width: 350px; display: block; position: absolute; background-color: #000; top: 50%; transform: translateY(-50%); margin: 0; overflow: hidden; } .slideshow__slidein img { display: block; position: absolute; top: 50%; transform: translateY(-50%); } .slideshow .overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: #000; opacity: 0.5; } .slideshow__forward .slideshow__slidein { right: -350px; z-index: 2; } .slideshow__forward .slideshow__slidein .slideTitle { font-size: 1.5em; color: #fff; font-family: "Century Gothic", sans-serif; font-weight: 100; margin: 0; padding-left: 1em; position: relative; top: 50%; transform: translateY(-50%); z-index: 11; margin-right: 300px; text-align: right; } .slideshow__forward .slideshow__block { position: absolute; display: block; top: 50%; transform: translateY(-50%); height: 100px; width: 80px; right: 270px; opacity: 0; background-color: #fff; z-index: 2; } .slideshow__back .slideshow__slidein { left: -350px; z-index: 2; } .slideshow__back .slideshow__slidein .slideTitle { font-size: 1.5em; color: #fff; font-family: "Century Gothic", sans-serif; font-weight: 100; margin: 0; padding-right: 1em; float: right; position: relative; top: 50%; transform: translateY(-50%); z-index: 11; margin-left: 300px; text-align: right; } .slideshow__back .slideshow__block { position: absolute; display: block; top: 50%; transform: translateY(-50%); height: 100px; width: 80px; left: 270px; opacity: 0; background-color: #fff; z-index: 2; } .slideshow .close { width: 25px; height: 25px; position: relative; display: block; opacity: 0; transition: opacity .25s ease-in-out; top: 50%; transform: translateY(-50%); margin-left: auto; margin-right: auto; } .slideshow .slideshow__block:hover .close { opacity: 1; } .slideshow__prev, .slideshow__next { width: 3em; z-index: 1; } .slideshow__prev svg, .slideshow__next svg { display: block; width: 100%; height: 100%; } .slideshow__prev { position: absolute; left: 5em; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; } .slideshow__prev .circle { opacity: 0; } .slideshow__next { position: absolute; right: 5em; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; } .slideshow__next .circle { opacity: 0; } </style></head><body> <div class="slideshow"> <div class="slideshow__contentWrap"> <h2 class="slideshow__title">True Detective</h2> <p class="slideshow__text">True Detective is an American crime drama television series created and written by Nix Pizzolatto. The series is broadcast by the premium cable network HBO in the United States.</p> </div> <ul class="slideshow__container"> <li class="slideshow__item"> <img class="slideshow__image" src="http://images.alphacoders.com/483/483700.jpg"/></li> <li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/></li> <li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/L3PZkY5leFs/maxresdefault.jpg"/></li> <li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/></li> </ul> <div class="slideshow__back"> <div class="slideshow__slidein"> <div class="overlay"></div><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/> <h2 class="slideTitle">PREVIOUS SLIDE </h2> </div> <div class="slideshow__block"><img class="close" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNjEyLjA0MyA2MTIuMDQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIuMDQzIDYxMi4wNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY3Jvc3MiPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzk3LjUwMywzMDYuMDExbDE5NS41NzctMTk1LjU3N2MyNS4yNy0yNS4yNjksMjUuMjctNjYuMjEzLDAtOTEuNDgyYy0yNS4yNjktMjUuMjY5LTY2LjIxMy0yNS4yNjktOTEuNDgxLDAgICAgIEwzMDYuMDIyLDIxNC41NTFMMTEwLjQ0NSwxOC45NzRjLTI1LjI2OS0yNS4yNjktNjYuMjEzLTI1LjI2OS05MS40ODIsMHMtMjUuMjY5LDY2LjIxMywwLDkxLjQ4MkwyMTQuNTQsMzA2LjAzM0wxOC45NjMsNTAxLjYxICAgICBjLTI1LjI2OSwyNS4yNjktMjUuMjY5LDY2LjIxMywwLDkxLjQ4MWMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MiwwbDE5NS41NzctMTk1LjU3NmwxOTUuNTc3LDE5NS41NzYgICAgIGMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MSwwYzI1LjI3LTI1LjI2OSwyNS4yNy02Ni4yMTMsMC05MS40ODFMMzk3LjUwMywzMDYuMDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"/></div> <div class="slideshow__prev"> <svg width="32px" height="32px" viewBox="1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="prevBtn" sketch:type="MSArtboardGroup" stroke="#1B2023" stroke-width="2"> <g id="Btn" sketch:type="MSLayerGroup" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) "> <path d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path> <circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle> </g> </g> </g> </svg> </div> </div> <div class="slideshow__forward"> <div class="slideshow__slidein"> <div class="overlay"></div><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/> <h2 class="slideTitle">NEXT SLIDE</h2> </div> <div class="slideshow__block"><img class="close" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNjEyLjA0MyA2MTIuMDQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIuMDQzIDYxMi4wNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY3Jvc3MiPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzk3LjUwMywzMDYuMDExbDE5NS41NzctMTk1LjU3N2MyNS4yNy0yNS4yNjksMjUuMjctNjYuMjEzLDAtOTEuNDgyYy0yNS4yNjktMjUuMjY5LTY2LjIxMy0yNS4yNjktOTEuNDgxLDAgICAgIEwzMDYuMDIyLDIxNC41NTFMMTEwLjQ0NSwxOC45NzRjLTI1LjI2OS0yNS4yNjktNjYuMjEzLTI1LjI2OS05MS40ODIsMHMtMjUuMjY5LDY2LjIxMywwLDkxLjQ4MkwyMTQuNTQsMzA2LjAzM0wxOC45NjMsNTAxLjYxICAgICBjLTI1LjI2OSwyNS4yNjktMjUuMjY5LDY2LjIxMywwLDkxLjQ4MWMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MiwwbDE5NS41NzctMTk1LjU3NmwxOTUuNTc3LDE5NS41NzYgICAgIGMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MSwwYzI1LjI3LTI1LjI2OSwyNS4yNy02Ni4yMTMsMC05MS40ODFMMzk3LjUwMywzMDYuMDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"/></div> <div class="slideshow__next"> <svg width="32px" height="32px" viewBox="-1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g class="Btn" sketch:type="MSLayerGroup" stroke="#1B2023" stroke-width="2"> <path class="line" d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path> <circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle> </g> </g> </svg> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(document).ready(function() { var imgWidth = $(".slideshow__image").width(), $slider = $(".slideshow__container"), $nextButton = $(".slideshow__next"), $prevButton = $(".slideshow__prev"), closeBlock = $(".slideshow__block"), slideInBlock = (".slideshow__slidein"), slideNext = $('.slideshow__forward').find('.slideshow__slidein'), slideBack = $('.slideshow__back').find('.slideshow__slidein'), clickCount = 0, clickCountImg = 1; $nextButton.click(function() { var circle = $(this).find('.circle'), line = $(this).find('.line'), block = $(this).parent().find('.slideshow__block'), slideIn = $(this).parent().find('.slideshow__slidein'), tl = new TimelineMax({ onComplete: tlComplete }), tl2 = new TimelineMax(); tl.set(circle, { x: 15, y: 15, scale: 0 }) .set(slideIn, { right: -350, opacity: 1 }, 0) .set(block, { right: 270, opacity: 0 }, 0) .set($nextButton, { zIndex: 1 }, 0) .to(circle, 0.5, { scale: 1, transformOrigin: "50%, 50%", opacity: 1 }, 0) .to(circle, 0.3, { opacity: 0 }) .to(line, 0.3, { scale: 0, transformOrigin: "50%, 50%" }, 0) .set(circle, { scale: 0, opacity: 0 }); function tlComplete() { tl2.to(slideIn, 0.5, { right: 0 }) .to(block, 0.5, { right: 350, opacity: 1 }, 0) }; function getLineback() { TweenMax.to(line, 0.3, { scale: 1, opacity: 1, delay: 0.5 }); }; closeBlock.click(function() { tl2.reverse(); }); closeBlock.click(getLineback); $prevButton.click(function() { tl2.reverse(); }); $prevButton.click(getLineback); }); $prevButton.click(function() { var circle = $(this).find('.circle'), line = $(this).find('.line'), block = $(this).parent().find('.slideshow__block'), slideIn = $(this).parent().find('.slideshow__slidein'), tl = new TimelineMax({ onComplete: tlComplete }), tl2 = new TimelineMax(); tl.set(circle, { x: 15, y: 15, scale: 0 }) .set(slideIn, { left: -350, opacity: 1 }, 0) .set(block, { left: 270, opacity: 0 }, 0) .set($prevButton, { zIndex: 1 }, 0) .to(circle, 0.5, { scale: 1, transformOrigin: "50%, 50%", opacity: 1 }, 0) .to(circle, 0.3, { opacity: 0 }) .to(line, 0.3, { scale: 0, transformOrigin: "50%, 50%" }, 0) .set(circle, { scale: 0, opacity: 0 }); function tlComplete() { tl2.to(slideIn, 0.3, { left: 0 }) .to(block, 0.3, { left: 350, opacity: 1 }, 0); }; function getLineback() { TweenMax.to(line, 0.3, { scale: 1, opacity: 1, delay: 0.5 }); }; closeBlock.click(function() { tl2.reverse(); }) closeBlock.click(getLineback); $nextButton.click(function() { tl2.reverse(); }); $nextButton.click(getLineback); }); slideNext.click(function() { clickCount++; clickCountImg++; var clickCountImgPrev = clickCountImg - 2; var firstImage = $('.slideshow__container li img:eq(0)'), imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'), image = $('.slideshow__container li img:eq(' + clickCountImg + ')'); if (clickCount > 3) { clickCount = 0; } if (clickCountImg > 3) { clickCountImg = 0; firstImage.clone().appendTo(slideNext); } TweenMax.to($slider, 0.5, { x: -clickCount * imgWidth }) slideNext.children("img").remove(); slideBack.children("img").remove(); image.clone().appendTo(slideNext); imagePrev.clone().appendTo(slideBack); console.log(image); if (clickCountImg == 0) { firstImage.clone().appendTo(slideNext); } }); slideBack.click(function() { clickCount--; clickCountImg--; var clickCountImgPrev = clickCountImg - 2, firstImage = $('.slideshow__container li img:eq(0)'), imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'), image = $('.slideshow__container li img:eq(' + clickCountImg + ')'); if (clickCount < 0) { clickCount = 3; } if (clickCountImg < 0) { clickCountImg = 3; } TweenMax.to($slider, 0.5, { x: -clickCount * imgWidth }); slideNext.children("img").remove(); slideBack.children("img").remove(); imagePrev.clone().appendTo(slideBack); image.clone().appendTo(slideNext); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: