"slider"
Bootstrap 3.3.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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/Em-An/pen/EmeBvw?depth=everything&limit=all&order=popularity&page=42&q=slider&show_forks=false" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; list-style: none; font-family: 'Gudea', sans-serif; font-weight: normal } h1 { width: 100%; height: 100vh; text-align: center; margin-top: 40px; font-size: 60px; color: #fff; background: rgba(239, 105, 116, 1); margin: 0; padding-top: 40vh } h1 a { font-size: 14px; color: #ccc; background: #e5626b; border-radius: 5px; padding: 2px 5px; border: 7px solid #e5626b; text-decoration: none } h1 a:hover { text-decoration: underline } .slider { width: 100%; height: 100vh; position: relative; } .slider ul, .slider ul li { width: 100%; height: 100% } .slider ul { position: relative; overflow: hidden } .slider ul li { position: absolute; top: 0; left: -100%; background-size: cover; /* semon #f98686 */ background-position: center; color: #fff; font-family: serif; } .slider ul li:first-of-type { background-image: url("http://www.misr5.news/wp-content/uploads/2015/10/6957804-girl-children-blonde-blue-eyes-autumn-mood.jpg") } .slider ul li:nth-of-type(2) { background-image: url("https://static.pexels.com/photos/87452/flowers-background-butterflies-beautiful-87452.jpeg") } .slider ul li:nth-of-type(3) { background-image: url("http://www.tsitut.net/wp-content/uploads/2016/04/born-to-stand-out.jpg") } .slider ul li:nth-of-type(4) { background-image: url("http://arunnath.com/i/2017/03/landscape-tumblr-wallpapers-high-quality-resolution.jpg") } .slider ul li:last-of-type { background-image: url("https://img1.etsystatic.com/023/1/6294118/il_340x270.568118221_inex.jpg") } .slider .controll { width: 40px; height: 40px; position: absolute; top: 44%; border-bottom: 3px solid #333; border-left: 3px solid #333; cursor: pointer; color: #333; z-index: 999999 } .slider .controll:first-of-type { transform: rotate(45deg); left: 20px } .slider .controll:last-of-type { transform: rotate(225deg); right: 20px } .slider .controll:hover, .slider .controll.active { border-color: #fff; outline-color: #f00 } .slider ol { text-align: center; padding-top: 10px; position: absolute; bottom: 10px; width: 100%; z-index: 999999 } .slider ol li { display: inline-block; margin-right: 5px; } .slider ol .fa { font-size: 15px; color: #fff; cursor: pointer; font-weight: normall } .slider ol li:hover .fa:before, .slider ol li.active .fa:before { content: "\f111" } @media(max-width: 490px) { h1 {font-size: 45px} } @media(max-width: 350px) { h1 {font-size: 25px} } /* VIRSION 03 */ .slide { width: 100%; height: 100vh; min-height: 550px; background-image: linear-gradient(rgba(239, 105, 116, .75), rgba(239, 105, 116, .3), rgba(239, 105, 116, .3), rgba(239, 105, 116, .3), rgba(239, 105, 116, .75)); background-size: cover; text-align: center; color: #fff; position: relative; overflow: hidden } .slide .container { position: relative; width: 100%; height: 100%; max-width: 1000px; margin: auto; padding: 0 10px; } .slide h2 { font-weight: normal; font-size: 50px; text-transform: uppercase; position: absolute } .slide h2:first-of-type { top: 15px; left: 15px } .slide h2:last-of-type { bottom: 50px; right: 15px } .slide .slide-center { width: 100%; max-width: 550px; text-align: center; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) } .slide p { text-align: left; line-height: 175%; margin-bottom: 15px; padding: 15px; font-size: 22px } .slide button { width: 125px; height: 35px; margin: 0 10px 10px; text-transform: uppercase; color: #eee; background: rgba(239, 105, 116, 1); border-radius: 5px; border: none; outline: none; cursor: pointer; font-weight: bold } .slide button:hover { opacity: 0.9 } .slide img { margin: 15px 7px 7px } @media(max-width: 850px) { .slide h2 {font-size: 40px} .slide p {font-size: 20px} } @media(max-width: 700px) { .slide h2 {font-size: 30px; font-weight: bold} .slide p {font-size: 20px} } @media(max-width: 600px) { .slide h2 {font-size: 25px} .slide p {font-size: 17px} } @media(max-width: 450px) { .slide h2 {font-size: 20px; font-weight: bold} .slide p {font-size: 15px} }</style></head><body> <!-- slider --> <div class="slider"> <!-- slide --> <ul> <li class="active"> <div class="slide"><div class="container"> <h2>Lorem Ipsum dummy</h2> <div class="slide-center"> <p>scrambled it to make a type specimen book has survived not only five centuries when an unknown printer took a galley five centuries</p> <button>Button One</button> <button>Button Two</button> <div class="images"> <img src="https://vetstreet-brightspot.s3.amazonaws.com/a0/63/f621ea184427b644a2ca63fcd1ff/Purple-butterfly-Thinkstock-97503533-335lc052213.jpg" width="100" height="100"> <img src="https://s-media-cache-ak0.pinimg.com/236x/c6/69/61/c66961a6f181cd3c28d005c714d3d7cc.jpg" width="100" height="100"> <img src="https://1.bp.blogspot.com/_LFcmuXNnYi0/SFcZoMa_vRI/AAAAAAAAECk/wD4ekEBPmrE/s400/6-16-08-GBBD-Daisy.jpg" width="100" height="100"> <img src="http://www.cherlaan.com/ekmps/shops/rhanley/resources/Design/red-feather-butterfly-with-metallic-gold-centre-13cm-849-p.jpg" width="100" height="100"> </div> </div> <h2>text printing esetting </h2> </div></div> </li> <li> <div class="slide"><div class="container"> <h2>Lorem Ipsum dummy</h2> <div class="slide-center"> <p>scrambled it to make a type specimen book has survived not only five centuries when an unknown printer took a galley five centuries</p> <button>Button One</button> <button>Button Two</button> <div class="images"> <img src="https://vetstreet-brightspot.s3.amazonaws.com/a0/63/f621ea184427b644a2ca63fcd1ff/Purple-butterfly-Thinkstock-97503533-335lc052213.jpg" width="100" height="100"> <img src="https://s-media-cache-ak0.pinimg.com/236x/c6/69/61/c66961a6f181cd3c28d005c714d3d7cc.jpg" width="100" height="100"> <img src="https://1.bp.blogspot.com/_LFcmuXNnYi0/SFcZoMa_vRI/AAAAAAAAECk/wD4ekEBPmrE/s400/6-16-08-GBBD-Daisy.jpg" width="100" height="100"> <img src="http://www.cherlaan.com/ekmps/shops/rhanley/resources/Design/red-feather-butterfly-with-metallic-gold-centre-13cm-849-p.jpg" width="100" height="100"> </div> </div> <h2>text printing esetting </h2> </div></div> </li> <li> <div class="slide"><div class="container"> <h2>Lorem Ipsum dummy</h2> <div class="slide-center"> <p>scrambled it to make a type specimen book has survived not only five centuries when an unknown printer took a galley five centuries</p> <button>Button One</button> <button>Button Two</button> <div class="images"> <img src="https://vetstreet-brightspot.s3.amazonaws.com/a0/63/f621ea184427b644a2ca63fcd1ff/Purple-butterfly-Thinkstock-97503533-335lc052213.jpg" width="100" height="100"> <img src="https://s-media-cache-ak0.pinimg.com/236x/c6/69/61/c66961a6f181cd3c28d005c714d3d7cc.jpg" width="100" height="100"> <img src="https://1.bp.blogspot.com/_LFcmuXNnYi0/SFcZoMa_vRI/AAAAAAAAECk/wD4ekEBPmrE/s400/6-16-08-GBBD-Daisy.jpg" width="100" height="100"> <img src="http://www.cherlaan.com/ekmps/shops/rhanley/resources/Design/red-feather-butterfly-with-metallic-gold-centre-13cm-849-p.jpg" width="100" height="100"> </div> </div> <h2>text printing esetting </h2> </div></div> </li> <li> <div class="slide"><div class="container"> <h2>Lorem Ipsum dummy</h2> <div class="slide-center"> <p>scrambled it to make a type specimen book has survived not only five centuries when an unknown printer took a galley five centuries</p> <button>Button One</button> <button>Button Two</button> <div class="images"> <img src="https://vetstreet-brightspot.s3.amazonaws.com/a0/63/f621ea184427b644a2ca63fcd1ff/Purple-butterfly-Thinkstock-97503533-335lc052213.jpg" width="100" height="100"> <img src="https://s-media-cache-ak0.pinimg.com/236x/c6/69/61/c66961a6f181cd3c28d005c714d3d7cc.jpg" width="100" height="100"> <img src="https://1.bp.blogspot.com/_LFcmuXNnYi0/SFcZoMa_vRI/AAAAAAAAECk/wD4ekEBPmrE/s400/6-16-08-GBBD-Daisy.jpg" width="100" height="100"> <img src="http://www.cherlaan.com/ekmps/shops/rhanley/resources/Design/red-feather-butterfly-with-metallic-gold-centre-13cm-849-p.jpg" width="100" height="100"> </div> </div> <h2>text printing esetting </h2> </div></div> </li> <li> <div class="slide"><div class="container"> <h2>Lorem Ipsum dummy</h2> <div class="slide-center"> <p>scrambled it to make a type specimen book has survived not only five centuries when an unknown printer took a galley five centuries</p> <button>Button One</button> <button>Button Two</button> <div class="images"> <img src="https://vetstreet-brightspot.s3.amazonaws.com/a0/63/f621ea184427b644a2ca63fcd1ff/Purple-butterfly-Thinkstock-97503533-335lc052213.jpg" width="100" height="100"> <img src="https://s-media-cache-ak0.pinimg.com/236x/c6/69/61/c66961a6f181cd3c28d005c714d3d7cc.jpg" width="100" height="100"> <img src="https://1.bp.blogspot.com/_LFcmuXNnYi0/SFcZoMa_vRI/AAAAAAAAECk/wD4ekEBPmrE/s400/6-16-08-GBBD-Daisy.jpg" width="100" height="100"> <img src="http://www.cherlaan.com/ekmps/shops/rhanley/resources/Design/red-feather-butterfly-with-metallic-gold-centre-13cm-849-p.jpg" width="100" height="100"> </div> </div> <h2>text printing esetting </h2> </div></div> </li> </ul> <ol> <!-- point --> <li class="active"><i class="fa fa-circle-o"></i></li> <li><i class="fa fa-circle-o"></i></li> <li><i class="fa fa-circle-o"></i></li> <li><i class="fa fa-circle-o"></i></li> <li><i class="fa fa-circle-o"></i></li> <!-- playpause --> <i class="fa playpause fa-pause-circle-o" title="pause"></i> </ol> <!-- controll --> <span class="controll active"></span> <span class="controll"></span> </div> <!-- title --> <h1>Slider gsap <br /> <a href="https://plus.google.com/u/2/collection/Ueezx" target="_blank">Code By Em An</a></h1> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script >$(function() { "use strict"; var body = $("body"), active = $(".slider ol li, .slider .controll"), controll = $(".slider .controll"), playpause = $(".playpause"), sliderTime = 1, sliderWait = 10000, i = 999, o, slideStart = $(".slider ul li:first"), autoRun, stop = false; // Reset slideStart.css("left", 0); function slideGSAP(parent) { "use strict"; var str = parent.find(".slide p"), arr = str.text().split(" "); for (o = 0; o < arr.length; o++) { arr[o] = "<span>" + arr[o] + "</span>"; } str.html(arr.join(" ")); var tl = new TimelineLite(); tl .set(parent.find(".slide"), { perspective: 400 }) .set(parent.find(".slide h2:first"), { x: 0, autoAlpha: 1 }) .set(parent.find(".slide h2:last"), { x: 0, autoAlpha: 1 }) .set(parent.find(".slide p span"), { cycle: { color: ["white", "white"] }, opacity:1, top: 0 }) .set(parent.find(".slide button:first"), { rotationY: 0, autoAlpha: 1 }) .set(parent.find(".slide button:last"), { rotationY: 0, autoAlpha: 1 }) .set(parent.find(".slide img"), { scale: 1, rotation: 1, borderRadius: 1, autoAlpha: 1 }) .from(parent.find(".slide h2:first"), 1.5, { x: -200, autoAlpha: 0 }) .from(parent.find(".slide h2:last"), 1.5, { x: 200, autoAlpha: 0 }, 0) .staggerFrom(parent.find(".slide p span"), 1, { cycle: { color: ["red", "yellow"] }, opacity:0, position: 'relative', cycle: {top: [-80, -40]}, left: 50 }, 0.009, "-=1") .from(parent.find(".slide button:first"), 1, { rotationY: -360, autoAlpha: 0 }, "-=1") .from(parent.find(".slide button:last"), 1, { rotationY: 360, autoAlpha: 0 }, "-=1") .staggerFrom(parent.find(".slide img"), 1, { scale: 0, rotation: -180, borderRadius: 100, autoAlpha: 0 }, 0.2, "-=0.5"); } slideGSAP(slideStart); // Run Slider function runSlider(what) { what.addClass("active").siblings("li, span").removeClass("active"); } // slider gsap function gsapSlider(whose, left) { i++; if (whose.hasClass("active")) { TweenMax.fromTo( ".slider ul li.active", sliderTime, { zIndex: i, left: left }, { left: 0 } ); } } // Active active.on("click", function() { runSlider($(this)); slideGSAP($(this)); }); // Arrow left controll.first().on("click", function() { var slide = $(".slider ul li.active, .slider ol li.active").is( ":first-of-type" ) ? $(".slider ul li:last, .slider ol li:last") : $(".slider ul li.active, .slider ol li.active").prev("li"); runSlider(slide); slideGSAP(slide); gsapSlider(slide, "100%"); }); // Arrow right controll.last().on("click", function() { var slide = $(".slider ul li.active, .slider ol li.active").is( ":last-of-type" ) ? $(".slider ul li:first, .slider ol li:first") : $(".slider ul li.active, .slider ol li.active").next("li"); runSlider(slide); slideGSAP(slide); gsapSlider(slide, "-100%"); }); // Point $(".slider ol li").on("click", function() { var start = $(".slider ul li.active").index(); var slide = $(".slider ul li").eq($(this).index()); runSlider(slide); slideGSAP(slide); var end = $(".slider ul li.active").index(); if (start > end) { gsapSlider(slide, "100%"); } if (start < end) { gsapSlider(slide, "-100%"); } }); // Auto run slider function autoRunSlider() { if (body.css("direction") === "ltr" && stop === false) { autoRun = setInterval(function() { controll.last().click(); }, sliderWait); } else if (body.css("direction") === "rtl" && stop === false) { autoRun = setInterval(function() { controll.first().click(); }, sliderWait); } } autoRunSlider(); // When hover active.on("mouseenter", function() { if (stop === false) {clearInterval(autoRun);} }); active.on("mouseleave", function() { if (stop === false) {autoRunSlider();} }); // play pause click playpause.on("click", function() { $(this).toggleClass("fa-play-circle-o fa-pause-circle-o"); if (playpause.hasClass("fa-play-circle-o")) { stop = true; clearInterval(autoRun); $(this).attr('title', 'play'); } if (playpause.hasClass("fa-pause-circle-o")) { stop = false; autoRunSlider(); $(this).attr('title', 'pause'); } }); }); // Em An // 5-2017 //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: