"uikit"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/qdev/pen/WORarX?limit=all&page=2&q=uikit" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/css/uikit.min.css'> <style class="cp-pen-styles">/* Drag result frame (height) in order to check cover height-viewport (navbar offset) */ nav{ height: 80px; margin-bottom: 0 !important; } .slider-container.uk-cover-container { box-sizing: border-box; min-height: calc(100vh - 80px); height: calc(100vh - 80px); } .slider-container .uk-cover{ width: 100%; } #slider .uk-overlay > span { display: inline-block; background: rgba(0,0,0,.5); padding: 30px; color: #FFF; font-weight: 300; } #slider .uk-overlay h3 { font-size: 2rem; font-weight: 300; color: #FFF; } #slider .uk-overlay p { font-size: 1.5rem; } #slider .uk-overlay p:last-child { margin-bottom: 0; }</style></head><body> <nav class="uk-navbar-container uk-margin" uk-navbar> <div class="uk-navbar-center"> <ul class="uk-navbar-nav"> <a class="uk-navbar-item uk-logo" href="#">Logo</a> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li class="uk-parent"> <a href="#">Parent</a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li> </ul> </div> </li> <li> <a href="#">Content</a> <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </nav> <div class="uk-cover-container slider-container" uk-height-viewport="offset-top: true"> <ul id="slider" class="uk-switcher"> <li class="uk-active"> <img src="http://dummyimage.com/1400x650/f00/fff" class="uk-cover" /> <span class="uk-overlay uk-position-bottom uk-container"> <span> <h3>Some cool title</h3> <p>This is some overlay text</p> </span> </span> </li> <li> <img src="http://dummyimage.com/1400x650/0f0/fff" class="uk-cover"> <span class="uk-overlay uk-position-bottom uk-container"> <span> <p>Some other overlay without title ...</p> </span> </span> </li> <li> <img src="http://dummyimage.com/1400x650/00f/fff" class="uk-cover"> <!-- dummy / hidden action buttons, on one of the switcher items --> <a href="javascript:;" class="uk-hidden" uk-switcher-item="previous"></a> <a href="javascript:;" class="uk-hidden" uk-switcher-item="next"></a> </li> </ul> <!-- real slidenav buttons, only one for all slides --> <a href="javascript:;" class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-large" uk-slidenav-previous></a> <a href="javascript:;" class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-large" uk-slidenav-next></a> </div> <!-- dummy / hidden switcher nav mandatory for the switcher to work, and also passing animation option --> <!-- blank links in a list matching the number of switch / slide panels --> <ul class="uk-hidden" uk-switcher="connect: #slider; animation: uk-animation-fade"> <li><a href="javascript:;"></a></li> <li><a href="javascript:;"></a></li> <li><a href="javascript:;"></a></li> </ul> <div style="height: 300px"> <p>Some dummy content below cover slider</p> </div> <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/uikit/3.0.0-beta.25/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit-icons.min.js'></script> <script >$("a[uk-slidenav-previous]", ".slider-container").click(function(){$("a[uk-switcher-item='previous']", "#slider").trigger('click')}) $("a[uk-slidenav-next]", ".slider-container").click(function(){$("a[uk-switcher-item='next']", "#slider").trigger('click')}) // You can even add some setInteval() scripts to simulate autoplay taskID = setInterval(function(){ $("a[uk-switcher-item='next']", "#slider").trigger('click') }, 3000) //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Kit React

Questions / Comments: