"slider"
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/onlyveen/pen/mBRabx?limit=all&page=23&q=food" /> <style class="cp-pen-styles">#body { background: #212121; min-height: 100vh; font-family: 'roboto', sans-serif; text-transform: captalize; letter-spacing: 2px; } @media only screen and (min-width: 768px) { #body { padding: 50px; } } @media only screen and (max-width: 767px) { #body { padding: 1px; } } #body, #body *, #body:before, #body *:before, #body:after, #body *:after { transition: all 1s; } #body ul { list-style-type: none; padding: 0; margin: 0; } #body .mobi-wrap { border-radius: 7px; position: relative; box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.25); width: 370px; margin: auto; background: #fff; padding: 30px; } #body .mobi-wrap > div { position: relative; border: solid 1px #999; overflow: hidden; border-radius: 7px; height: 100%; } #body .mobi-wrap > div .float { transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); position: absolute; height: 200px; width: 200px; border-radius: 50%; left: 0; right: 0; margin: auto; top: 50px; background: #d6e8fa; } #body .mobi-wrap > div .float > p.p-icon { transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); height: 40px; width: 40px; overflow: hidden; background: #1976d2; box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.25); border-radius: 50%; position: absolute; top: 0; left: 20px; } #body .mobi-wrap > div .float > p.p-icon > i { position: absolute; color: #fff; line-height: 40px; width: 100%; top: 0; left: 0; text-align: center; left: 50px; animation: cmon 1s linear !important; } #body .mobi-wrap > div .float > p.p-icon > i.active { opacity: 1; animation: none !important; left: 0px; } #body .mobi-wrap > div .float > p.p-icon > i:first-child:before { font-size: 20px; } #body .mobi-wrap > div .float > .spans { height: 100%; } #body .mobi-wrap > div .float > .spans > span { height: 20px; width: 20px; background: #1976d2; border-radius: 50%; position: absolute; opacity: .2; } #body .mobi-wrap > div .float > .spans > span:nth-child(1) { left: 40%; top: 10%; transform: scale(0.9); } #body .mobi-wrap > div .float > .spans > span:nth-child(2) { left: 10%; top: -3%; transform: scale(0.6); } #body .mobi-wrap > div .float > .spans > span:nth-child(3) { left: 20%; top: 90%; transform: scale(1.1); } #body .mobi-wrap > div .float > .spans > span:nth-child(4) { left: 101%; top: 55%; transform: scale(0.6); } #body .mobi-wrap > div .float > .spans > span:nth-child(5) { left: 90%; top: 15%; transform: scale(0.5); } #body .mobi-wrap > div .float > .spans > span:nth-child(6) { left: 90%; top: 70%; transform: scale(0.2); } #body .mobi-wrap > div .slider { min-height: 450px; position: relative; } #body .mobi-wrap > div .slider > li { position: absolute; color: #fff; width: 100%; top: 0; left: 550px; animation: cmon2 1s linear !important; } #body .mobi-wrap > div .slider > li .imgs { height: 300px; display: flex; } #body .mobi-wrap > div .slider > li .imgs img { display: block; margin: auto; max-width: 50%; transform: rotate(45deg); transition-delay: .25s; } #body .mobi-wrap > div .slider > li .desc { text-align: center; color: #333; margin-top: -20px; padding: 0 15px; } #body .mobi-wrap > div .slider > li .desc .first { font-size: 20px; color: #1976d2; transform: translateX(45px); } #body .mobi-wrap > div .slider > li .desc .last { font-size: 12px; transform: translateX(-45px); } #body .mobi-wrap > div .slider > li.active { opacity: 1; animation: none !important; left: 0px; } #body .mobi-wrap > div .slider > li.active .imgs img { transform: rotate(0deg); } #body .mobi-wrap > div .slider > li.active .first { color: #1976d2; transform: translateX(0); } #body .mobi-wrap > div .slider > li.active .last { transform: translateX(0); } #body .mobi-wrap > div .actions { display: flex; justify-content: space-around; margin-bottom: 20px; } #body .mobi-wrap > div .actions button { border: 0; padding: 0; background: transparent; text-transform: uppercase; color: #1976d2; font-weight: bold; } #body .mobi-wrap > div .actions button:focus { outline: none; } #body .mobi-wrap > div .actions button.disabled { color: #ccc; pointer-events: none; } #body .mobi-wrap > div .actions .dots { display: flex; } #body .mobi-wrap > div .actions .dots li { height: 7px; width: 7px; background: #1976d2; margin: 5px; opacity: .5; border-radius: 50%; cursor: pointer; transform: scale(0.9); } #body .mobi-wrap > div .actions .dots li.active { transform: scale(1); opacity: 1; } @keyframes cmon { 0% { left: 0; opacity: 1; } 49% { left: -50px; opacity: 1; } 50% { left: -50px; opacity: 0; } 100% { left: 50px; opacity: 0; } } @keyframes cmon2 { 0% { left: 0; opacity: 1; } 49% { left: -550px; opacity: 1; } 50% { left: -550px; opacity: 0; } 100% { left: 550px; opacity: 0; } } @media only screen and (max-width: 767px) { #body .mobi-wrap { margin: 15px; max-width: 100%; width: auto; } #body .mobi-wrap > div .slider { min-height: 500px; } } </style></head><body> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://use.fontawesome.com/aa95071b26.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="body"> <div class="mobi-wrap"> <div> <div class="float"> <div class="spans"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <p class="p-icon"> <i class="fa fa-mobile active" aria-hidden="true"></i> <i class="fa fa-child" aria-hidden="true"></i> <i class="fa fa-shopping-cart" aria-hidden="true"></i> <i class="fa fa-credit-card-alt" aria-hidden="true"></i> </p> </div> <ul class="slider"> <li class="active"> <div class="imgs"><img src="https://maxcdn.icons8.com/Share/icon/Mobile//iphone1600.png"></div> <div class="desc"> <p class="first">Electronic</p> <p class="last">There is a growing trend by which consumers tend to replace old mobile phones with new ones, every time a good one is launched.</p> </div> </li> <li> <div class="imgs"><img src="https://maxcdn.icons8.com/Share/icon/Sports//player_shirt_1600.png"></div> <div class="desc"> <p class="first">Fashion</p> <p class="last">Fashion has taken today’s youth by surprise, and the availability of numerous options just leaves them spoilt of choice.</p> </div> </li> <li> <div class="imgs"><img src="https://dye1fo42o13sl.cloudfront.net/store-icon.png"></div> <div class="desc"> <p class="first">Grocery</p> <p class="last">Best online grocery and food shopping store in inda. It is very simple and easy. No more standing in lines, carrying heavy bags and looking for parking!</p> </div> </li> <li> <div class="imgs"><img src="https://cdn2.iconfinder.com/data/icons/business-finance-29/32/46_banking_business_connection_indian_rupee_money_payment-512.png"></div> <div class="desc"> <p class="first">Pay Conveniently</p> <p class="last">Pay using debit card, credit card or any wallets. Get delivery by paying cash at ur place</p> </div> </li> </ul> <div class="actions"> <button class="prev disabled">Back </button> <ul class="dots"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> <button class="next">Next </button> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >$('.actions .dots li').click(function () { $('.slider li:nth(' + $(this).index() + ') , .float p i:nth(' + $(this).index() + ')').addClass('active').siblings().removeClass('active'); $(this).addClass('active').siblings().removeClass('active'); }); $('.actions .prev').click(function () { $(this).siblings('button').removeClass('disabled'); var indx = $('.actions .dots li.active').index(); if (indx == 0) { $('.actions .dots li:last-child, .slider li:last-child , .float p i:last-child').addClass('active').siblings().removeClass('active'); } else{ $('.actions .dots li:nth('+(indx - 1)+'), .slider li:nth('+(indx - 1)+') , .float p i:nth('+(indx - 1)+')').addClass('active').siblings().removeClass('active'); }; if (indx == 1) { $(this).addClass('disabled'); } var deg = (360/$('.actions .dots li').length) * (indx-1); $('.float').css('transform','rotate('+deg+'deg)'); $('.float .spans').css('transform','rotate('+-deg/3+'deg)'); $('.p-icon').css('transform','rotate('+-deg+'deg)'); }); $('.actions .next').click(function () { $(this).siblings('button').removeClass('disabled'); var indx = $('.actions .dots li.active').index(); if (indx == $('.actions .dots li').length - 1) { $('.actions .dots li:first-child, .slider li:first-child , .float p i:first-child').addClass('active').siblings().removeClass('active'); } else{ $('.actions .dots li:nth('+(indx + 1)+'), .slider li:nth('+(indx + 1)+') , .float p i:nth('+(indx + 1)+')').addClass('active').siblings().removeClass('active'); }; if (indx == $('.actions .dots li').length - 2) { $(this).addClass('disabled'); } var deg = (360/$('.actions .dots li').length) * (indx+1); $('.float').css('transform','rotate('+deg+'deg)'); $('.float .spans').css('transform','rotate('+-deg/3+'deg)'); $('.p-icon').css('transform','rotate('+-deg+'deg)'); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: