"cool slider"
Bootstrap 3.0.0 Snippet by vivekbisht109

<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="slider"> <div class="slider--el slider--el-1 anim-4parts active"> <div class="slider--el-bg"> <div class="part top left"></div> <div class="part top right"></div> <div class="part bot left"></div> <div class="part bot right"></div> </div> <div class="slider--el-content"> <h2 class="slider--el-heading">First slide</h2> </div> </div> <div class="slider--el slider--el-2 anim-9parts"> <div class="slider--el-bg"> <div class="part left-top"></div> <div class="part mid-top"></div> <div class="part right-top"></div> <div class="part left-mid"></div> <div class="part mid-mid"></div> <div class="part right-mid"></div> <div class="part left-bot"></div> <div class="part mid-bot"></div> <div class="part right-bot"></div> </div> <div class="slider--el-content"> <h2 class="slider--el-heading">Second slide</h2> </div> </div> <div class="slider--el slider--el-3 anim-5parts"> <div class="slider--el-bg"> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> <div class="part part-5"></div> </div> <div class="slider--el-content"> <h2 class="slider--el-heading">Third slide</h2> </div> </div> <div class="slider--el slider--el-4 anim-3parts"> <div class="slider--el-bg"> <div class="part left"></div> <div class="part mid"></div> <div class="part right"></div> </div> <div class="slider--el-content"> <h2 class="slider--el-heading">Fourth slide</h2> </div> </div> <span class="slider--control left"></span> <span class="slider--control right"></span> </div>
@font-face { src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/TESLA.ttf"); font-family: Tesla; } @font-face { src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFDinTextCompPro-Medium.ttf"); font-family: pfd-medium; } *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-size: 62.5%; height: 100%; overflow: hidden; } button, input { outline: none; border: none; } .slider { position: relative; height: 100%; } .slider--control { z-index: 50; position: absolute; top: calc(50% - 1.4rem); width: 1.7rem; height: 2.8rem; cursor: pointer; } .slider--control.left { left: 3rem; } .slider--control.right { right: 3rem; } .slider--control:after { content: ""; position: absolute; display: block; top: -0.6rem; left: -1.15rem; width: 4rem; height: 4rem; background: rgba(255, 255, 255, 0.5); border-radius: 50%; } .slider--el { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: z-index 0.1s, -webkit-transform 2.8s; transition: z-index 0.1s, -webkit-transform 2.8s; transition: transform 2.8s, z-index 0.1s; transition: transform 2.8s, z-index 0.1s, -webkit-transform 2.8s; overflow: hidden; } .slider--el.active { z-index: 10; } .slider--el.active .slider--el-bg { -webkit-transform: scale(0.834); transform: scale(0.834); } .slider--el.active .slider--el-content { opacity: 1; } .slider--el.next { z-index: 5; } .slider--el.next .slider--el-bg { -webkit-transform: scale(0.834); transform: scale(0.834); } .slider--el.anim-5parts .part { position: absolute; top: 0; width: 20.1%; height: 100%; overflow: hidden; will-change: transform; } .slider--el.anim-5parts .part:before { content: ""; display: block; position: absolute; background-size: cover; top: 0; width: 500%; height: 100%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-1.jpg"); } .slider--el.anim-5parts .part.part-1 { -webkit-transition: -webkit-transform 1.1s 0.3s; transition: -webkit-transform 1.1s 0.3s; transition: transform 1.1s 0.3s; transition: transform 1.1s 0.3s, -webkit-transform 1.1s 0.3s; left: 0%; } .slider--el.anim-5parts .part.part-1:before { left: 0%; } .slider--el.anim-5parts .part.part-2 { -webkit-transition: -webkit-transform 1.1s 0.5s; transition: -webkit-transform 1.1s 0.5s; transition: transform 1.1s 0.5s; transition: transform 1.1s 0.5s, -webkit-transform 1.1s 0.5s; left: 20%; } .slider--el.anim-5parts .part.part-2:before { left: -100%; } .slider--el.anim-5parts .part.part-3 { -webkit-transition: -webkit-transform 1.1s 0.7s; transition: -webkit-transform 1.1s 0.7s; transition: transform 1.1s 0.7s; transition: transform 1.1s 0.7s, -webkit-transform 1.1s 0.7s; left: 40%; } .slider--el.anim-5parts .part.part-3:before { left: -200%; } .slider--el.anim-5parts .part.part-4 { -webkit-transition: -webkit-transform 1.1s 0.5s; transition: -webkit-transform 1.1s 0.5s; transition: transform 1.1s 0.5s; transition: transform 1.1s 0.5s, -webkit-transform 1.1s 0.5s; left: 60%; } .slider--el.anim-5parts .part.part-4:before { left: -300%; } .slider--el.anim-5parts .part.part-5 { -webkit-transition: -webkit-transform 1.1s 0.3s; transition: -webkit-transform 1.1s 0.3s; transition: transform 1.1s 0.3s; transition: transform 1.1s 0.3s, -webkit-transform 1.1s 0.3s; left: 80%; } .slider--el.anim-5parts .part.part-5:before { left: -400%; } .slider--el.anim-5parts.removed .part { -webkit-transform: translateY(100%); transform: translateY(100%); } .slider--el.anim-9parts .slider--el-bg { -webkit-perspective: 2000; perspective: 2000; } .slider--el.anim-9parts .part { position: absolute; width: 33.5%; height: 33.5%; overflow: hidden; will-change: transform; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } .slider--el.anim-9parts .part:before { content: ""; display: block; position: absolute; background-size: cover; width: 300%; height: 300%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg"); } .slider--el.anim-9parts .part.left-top { top: 0%; left: 0%; -webkit-transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s; transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.left-top:before { top: 0%; left: 0%; } .slider--el.anim-9parts .part.mid-top { top: 0%; left: 33.33333%; -webkit-transition: opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s; transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.mid-top:before { top: 0%; left: -100%; } .slider--el.anim-9parts .part.right-top { top: 0%; left: 66.66667%; -webkit-transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s; transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.right-top:before { top: 0%; left: -200%; } .slider--el.anim-9parts .part.left-mid { top: 33.33333%; left: 0%; -webkit-transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s; transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.left-mid:before { top: -100%; left: 0%; } .slider--el.anim-9parts .part.mid-mid { top: 33.33333%; left: 33.33333%; -webkit-transition: opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s; transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.mid-mid:before { top: -100%; left: -100%; } .slider--el.anim-9parts .part.right-mid { top: 33.33333%; left: 66.66667%; -webkit-transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s; transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.right-mid:before { top: -100%; left: -200%; } .slider--el.anim-9parts .part.left-bot { top: 66.66667%; left: 0%; -webkit-transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s; transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.left-bot:before { top: -200%; left: 0%; } .slider--el.anim-9parts .part.mid-bot { top: 66.66667%; left: 33.33333%; -webkit-transition: opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s; transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.mid-bot:before { top: -200%; left: -100%; } .slider--el.anim-9parts .part.right-bot { top: 66.66667%; left: 66.66667%; -webkit-transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95); transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s; transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95); } .slider--el.anim-9parts .part.right-bot:before { top: -200%; left: -200%; } .slider--el.anim-9parts.removed .part { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } .slider--el.anim-3parts .part { position: absolute; top: 0; width: 33.5%; height: 100%; overflow: hidden; -webkit-transition: -webkit-transform 1.5s 0.3s; transition: -webkit-transform 1.5s 0.3s; transition: transform 1.5s 0.3s; transition: transform 1.5s 0.3s, -webkit-transform 1.5s 0.3s; will-change: transform; } .slider--el.anim-3parts .part:before { content: ""; display: block; position: absolute; background-size: cover; width: 300%; height: 100%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-3.jpg"); } .slider--el.anim-3parts .part.left { left: 0; } .slider--el.anim-3parts .part.left:before { left: 0; } .slider--el.anim-3parts .part.mid { left: 33.33333%; } .slider--el.anim-3parts .part.mid:before { left: -100%; } .slider--el.anim-3parts .part.right { left: 66.66667%; } .slider--el.anim-3parts .part.right:before { left: -200%; } .slider--el.anim-3parts.removed .left { -webkit-transform: translate3D(-100%, -33.333%, 0); transform: translate3D(-100%, -33.333%, 0); } .slider--el.anim-3parts.removed .mid { -webkit-transform: translate3D(0, 100%, 0); transform: translate3D(0, 100%, 0); } .slider--el.anim-3parts.removed .right { -webkit-transform: translate3D(100%, -33.333%, 0); transform: translate3D(100%, -33.333%, 0); } .slider--el.anim-4parts .part { position: absolute; width: 50.2%; height: 50.2%; overflow: hidden; will-change: transform; } .slider--el.anim-4parts .part:before { content: ""; display: block; position: absolute; background-size: cover; width: 200%; height: 200%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-4.jpg"); } .slider--el.anim-4parts .part.top { top: 0; -webkit-transition: -webkit-transform 1.3s 0.3s; transition: -webkit-transform 1.3s 0.3s; transition: transform 1.3s 0.3s; transition: transform 1.3s 0.3s, -webkit-transform 1.3s 0.3s; } .slider--el.anim-4parts .part.top:before { top: 0; } .slider--el.anim-4parts .part.bot { top: 50%; -webkit-transition: -webkit-transform 1.3s 0.5s; transition: -webkit-transform 1.3s 0.5s; transition: transform 1.3s 0.5s; transition: transform 1.3s 0.5s, -webkit-transform 1.3s 0.5s; } .slider--el.anim-4parts .part.bot:before { top: -100%; } .slider--el.anim-4parts .part.left { left: 0; } .slider--el.anim-4parts .part.left:before { left: 0; } .slider--el.anim-4parts .part.right { left: 50%; } .slider--el.anim-4parts .part.right:before { left: -100%; } .slider--el.anim-4parts.removed .left { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .slider--el.anim-4parts.removed .right { -webkit-transform: translateX(100%); transform: translateX(100%); } .slider--el-bg { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; background-size: cover; -webkit-transition: -webkit-transform 1s 1s; transition: -webkit-transform 1s 1s; transition: transform 1s 1s; transition: transform 1s 1s, -webkit-transform 1s 1s; will-change: transform; } .slider--el-bg .part:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); } .slider--el-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20rem; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; } .slider--el-heading { font-size: 9rem; font-family: Tesla; text-transform: uppercase; color: #fff; } .slider--el.removed .slider--el-content { opacity: 0; }
$(document).ready(function() { var sliding = false, curSlide = 1, numOfSlides = $(".slider--el").length; $(document).on("click", ".slider--control", function() { if (sliding) return; sliding = true; $(".slider--el").show(); $(".slider--el").css("top"); $(".slider--el.active").addClass("removed"); ($(this).hasClass("right")) ? curSlide++ : curSlide--; if (curSlide < 1) curSlide = numOfSlides; if (curSlide > numOfSlides) curSlide = 1; $(".slider--el-" + curSlide).addClass("next"); setTimeout(function() { $(".slider--el.removed").hide(); $(".slider--el").removeClass("active next removed"); $(".slider--el-" + curSlide).addClass("active"); sliding = false; }, 1800); }); });

Related: See More


Questions / Comments: