"thumbnail slide"
Bootstrap 3.0.0 Snippet by hkkcngz

<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 ----------> <div class="body"> <div class="slider-container" id="slider-container"> <div class="slider-outer clearfix" id="slider-outer"> <div class="slide clearfix"> <div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/DI64TAJTIS.jpg"/> <div class="overlay"></div> </div> <div class="slide-details"> <div class="header"> <h2>Aperiri Sapientem</h2> </div> <p>Nam ante est euismod id consequat eget congue et lacus Sed consequat laoreet purus efficitur semper turpis pretium vitae.</p> <button>call to action</button> </div> </div> <div class="slide clearfix"> <div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FOWR0O1WQ6.jpg"/> <div class="overlay"></div> </div> <div class="slide-details"> <div class="header"> <h2>Erant Aperiri<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2> </div> <p>congue et lacus Sed consequat laoreet purus efficitur semper turpis pretium vitae Nam ante est euismod id consequat eget.</p> <button>call to action</button> </div> </div> <div class="slide clearfix"> <div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2YMA649WFC.jpg"/> <div class="overlay"></div> </div> <div class="slide-details"> <div class="header"> <h2>Lorem ipsum dolor sit amet<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2> </div> <p>Ante est, euismod id consequat eget, congue et lacus. Sed consequat laoreet purus, efficitur semper turpis pretium vitae</p> <button>call to action</button> </div> </div> <div class="slide clearfix"> <div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/ONV344KX9K.jpg"/> <div class="overlay"></div> </div> <div class="slide-details"> <div class="header"> <h2>consectetur adipiscing elit<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2> </div> <p>Sed finibus malesuada sem sed placerat. Sed id neque mattis dui hendrerit mattis. Etiam ultrices varius risus.</p> <button>call to action</button> </div> </div> <div class="slide clearfix"> <div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/J98HWXTPPV.jpg"/> <div class="overlay"></div> </div> <div class="slide-details"> <div class="header"> <h2>tempus nulla lacinia<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2> </div> <p>Maecenas euismod mauris pretium nibh vestibulum pellentesque. Sed porta malesuada viverra, Pellentesque egestas faucibus turpis.</p> <button>call to action</button> </div> </div> <div class="slide clearfix"> <div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UK8ZUNVEG6.jpg"/> <div class="overlay"></div> </div> <div class="slide-details"> <div class="header"> <h2>Nam consequat felis<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2> </div> <p>In blandit lorem ut ante cursus pharetra Nulla ultrices, metus vehicula tristique sagittis lectus dui fermentum quam.</p> <button>call to action</button> </div> </div> </div> <div class="slide-controls"> <div class="left">‹</div> <div class="right">›</div> </div> </div> </div>
* { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; background-color: #ffffff; user-select: none; } .clearfix:after { content: ''; display: block; clear: both; } .slider-container { width: 100%; overflow: hidden; position: relative; } .slider-outer { transition: all 1.5s cubic-bezier(0.13, 0.56, 0.58, 0.97); height: 100%; } .slide { width: 100%; height: 100vh; min-height: 300px; float: left; overflow: hidden; position: relative; } .slide-thump, .slide-details { float: left; } .slide-thump, .slide-details { width: 50%; height: 100%; position: relative; } .slide-thump img { width: 100%; height: 100%; } .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: transparent; transition: all 3s ease; } .overlay:before, .overlay:after { content: ''; display: block; position: absolute; top: 30px; left: 30px; bottom: 30px; right: 30px; transition: all 1s ease; color: #b1b1b1; } .overlay:before { border-left: 1px solid; border-right: 1px solid; transform: scale3d(1, 0, 1); } .overlay:after { border-top: 1px solid; border-bottom: 1px solid; transform: scale3d(0, 1, 1); } .slide-thump:hover .overlay:before, .slide-thump:hover .overlay:after { transform: scale3d(1, 1, 1); } .slide-thump:hover .overlay { transition: all 1s ease; background-color: rgba(0, 0, 0, 0.7); } /*-------------- slide details ---------------*/ .slide-details { padding: 15vh 60px; text-align: center; background-color: #ffffff; } .header { overflow: hidden; } .slide-details h2 { position: relative; box-shadow: inset 0 0 0 2px #777; display: inline-block; padding: 14px 40px; overflow: hidden; color: #555; } .slide-details h2:before, .slide-details h2:after { content: ''; display: block; width: 30px; height: 30px; position: absolute; background-color: #fff; border: 2px solid #777; border-radius: 30px; } .slide-details h2:before { top: -15px; left: -15px; } .slide-details h2:after { top: -15px; left: calc(100% - 15px); } /* corners border */ .slide-details p { font-size: 1.7em; color: #777; position: relative; padding: 30px 0px; } .slide-details p:before { content: ''; display: block; width: 100%; height: 3px; background-color: #888; position: absolute; bottom: 0; transform: scale3d(0.4, 1, 1); transition: all 1s ease; } .slide-details p:hover:before { transform: scale3d(0.7, 1, 1); } .slide-details button { margin-top: 10vh; padding: 10px 40px; font-size: 1.4em; color: #77b5e2; text-transform: uppercase; background-color: transparent; border: 1px solid #77b5e2; cursor: pointer; transition: background-color 1s ease-in-out, color .7s ease-in-out; } .slide-details button:hover { background-color: #77b5e2; color: #fff; } .slide-controls { position: absolute; height: 60px; line-height: 50px; text-align: center; font-size: 3em; color: #fff; width: 200px; left: 0; top: 50%; transform: translateY(-50%); } .slide-controls .left, .slide-controls .right { position: absolute; top: 0; width: 50%; height: 100%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; transition: all 1s ease; } .slide-controls .left:hover, .slide-controls .right:hover { background-color: rgba(0, 0, 0, 0.7); } .slide-controls .right { right: 0; } /* slides aniamtion */ .slide .slide-thump, .slide-details .header, .slide-details p { transition: all 1s ease; } .slide .slide-thump { transform: translate3d(0, -100%, 1px); transition-delay: 0s; } .slide-details .header { transform: translate3d(0, 200%, 1px); transition: all 1s linear; transition-delay: 0.75s; } .slide-details p { transform: scale3d(0, 0, 1); transition-delay: 1.5s; } .slide.active .slide-thump, .slide.active .slide-details .header { transform: translate3d(0, 0, 1px); } .slide.active .slide-details p { transform: scale3d(1, 1, 1); }
window.onload = function () { 'use strict'; function each(e, callback) { var i = 0, l = e.length; for (; i < l; i++) { callback.call(e[i], i, e[i]); } } var slideDuration = 6000, // slide duration in ms pauseOnHover = false, // pause auto play on hover slideContainer = document.getElementById('slider-container'), slideOuter = document.getElementById('slider-outer'), slides = slideOuter.getElementsByClassName('slide'), slidesLen = slides.length, slidePercent = 100 / slidesLen, lastSlide = slidesLen - 1, slideLeft = document.getElementsByClassName('left')[0], slideRight = document.getElementsByClassName('right')[0], translateLen = slidePercent * -1, translateBy = 0, threshold = 1.3, i = 0, slideInterval; // slides outer container width in percent // equal to slides number * 100 slideOuter.style.width = slidesLen * 100 + '%'; // slide width each(slides, function (i, slide) { slide.style.width = slidePercent + '%'; }); //add active class to current slide function activeSlide() { each(slides, function (index, e) { e.classList.remove('active'); }); slides[i].classList.add('active'); } activeSlide(); function translateSlider() { translateBy = i * translateLen; slideOuter.style.transform = 'translateX('+ translateBy +'%)'; activeSlide(); slideOuter.removeEventListener('transitionend', transitionEnd); slideOuter.addEventListener('transitionend', transitionEnd); } function slideForward() { i++; if (i > lastSlide) {i = 0;} translateSlider(); } function slideBackward() { i--; if (i < 0) {i = lastSlide;} translateSlider(); } function autoSlideInterval () { window.clearInterval(slideInterval); slideInterval = window.setInterval(slideForward, slideDuration); } autoSlideInterval(); // next prev controls function setControls(control, d) { control.addEventListener('click', function () { window.clearInterval(slideInterval); d === -1 ? slideBackward() : slideForward(); autoSlideInterval(); }); } setControls(slideLeft, -1); setControls(slideRight, 1); if (pauseOnHover) { slideContainer.addEventListener('mouseover', function () { window.clearInterval(slideInterval); }); slideContainer.addEventListener('mouseout', function () { autoSlideInterval(); }); } function swipeSlide() { var slideLeft = slideOuter.offsetLeft, // translate when movedLength pass it slideOuterWidth = slideOuter.clientWidth, startPoint, movedLength, diff; function mouseMoveFunction(m) { movedLength = (m.pageX - startPoint) / slideOuterWidth * 100; var diff = translateBy + movedLength; slideOuter.style.transform = 'translate3d('+ diff +'%, 0, 0)'; } slideOuter.onmousedown = function (e) { window.clearInterval(slideInterval); slideOuter.style.transition = 'all 0s ease'; startPoint = e.pageX; slideOuter.addEventListener('mousemove', mouseMoveFunction); }; slideOuter.onmouseup = function (e) { slideOuter.removeEventListener('mousemove', mouseMoveFunction); slideOuter.style.transition = ''; if (movedLength >= threshold) { slideBackward(); } else if (movedLength < -threshold ) { slideForward(); } else { slideOuter.style.transform = 'translate3d('+translateBy+'%, 0, 0)'; } autoSlideInterval(); }; } swipeSlide(); };

Related: See More


Questions / Comments: