"Materialise slider"
Bootstrap 4.0.0 Snippet by onojagodday

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 fullscreen"> <ul class="slides"> <li> <img src="https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <!-- random image --> <div class="caption center-align"> <h3>This is our big Tagline!</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> <li> <img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image --> <div class="caption left-align"> <h3>Left Aligned Caption</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> <li> <img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image --> <div class="caption right-align"> <h3>Right Aligned Caption</h3> <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> </div> </li> </ul> </div> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
(function($){ $(function(){ var window_width = $(window).width(); // convert rgb to hex value string function rgb2hex(rgb) { if (/^#[0-9A-F]{6}$/i.test(rgb)) { return rgb; } rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); if (rgb === null) { return "N/A"; } function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } $('.dynamic-color .col').each(function () { $(this).children().each(function () { var color = $(this).css('background-color'), classes = $(this).attr('class'); $(this).html('<span>' + rgb2hex(color) + " " + classes + '</span>'); if (classes.indexOf("darken") >= 0 || $(this).hasClass('black')) { $(this).css('color', 'rgba(255,255,255,.9'); } }); }); // Floating-Fixed table of contents setTimeout(function() { var tocWrapperHeight = 260; // Max height of ads. var tocHeight = $('.toc-wrapper .table-of-contents').length ? $('.toc-wrapper .table-of-contents').height() : 0; var socialHeight = 95; // Height of unloaded social media in footer. var footerOffset = $('body > footer').first().length ? $('body > footer').first().offset().top : 0; var bottomOffset = footerOffset - socialHeight - tocHeight - tocWrapperHeight; if ($('nav').length) { $('.toc-wrapper').pushpin({ top: $('nav').height(), bottom: bottomOffset }); } else if ($('#index-banner').length) { $('.toc-wrapper').pushpin({ top: $('#index-banner').height(), bottom: bottomOffset }); } else { $('.toc-wrapper').pushpin({ top: 0, bottom: bottomOffset }); } }, 100); // BuySellAds Detection var $bsa = $(".buysellads"), $timesToCheck = 3; function checkForChanges() { if (!$bsa.find('#carbonads').length) { $timesToCheck -= 1; if ($timesToCheck >= 0) { setTimeout(checkForChanges, 500); } else { var donateAd = $('<div id="carbonads"><span><a class="carbon-text" href="#!" onclick="document.getElementById(\'paypal-donate\').submit();"><img src="images/donate.png" /> Help support us by turning off adblock. If you still prefer to keep adblock on for this page but still want to support us, feel free to donate. Any little bit helps.</a></form></span></div>'); $bsa.append(donateAd); } } } checkForChanges(); // BuySellAds Demos close button. $('.buysellads.buysellads-demo .close').on('click', function() { $(this).parent().remove(); }); // Github Latest Commit if ($('.github-commit').length) { // Checks if widget div exists (Index only) $.ajax({ url: "https://api.github.com/repos/dogfalo/materialize/commits/v1-dev", dataType: "json", success: function (data) { var sha = data.sha, date = jQuery.timeago(data.commit.author.date); if (window_width < 1120) { sha = sha.substring(0,7); } $('.github-commit').find('.date').html(date); $('.github-commit').find('.sha').html(sha).attr('href', data.html_url); } }); } // Toggle Flow Text var toggleFlowTextButton = $('#flow-toggle'); toggleFlowTextButton.click( function(){ $('#flow-text-demo').children('p').each(function(){ $(this).toggleClass('flow-text'); }); }); // Toggle Containers on page var toggleContainersButton = $('#container-toggle-button'); toggleContainersButton.click(function(){ $('body .browser-window .container, .had-container').each(function(){ $(this).toggleClass('had-container'); $(this).toggleClass('container'); if ($(this).hasClass('container')) { toggleContainersButton.text("Turn off Containers"); } else { toggleContainersButton.text("Turn on Containers"); } }); }); // Detect touch screen and enable scrollbar if necessary function is_touch_device() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } if (is_touch_device()) { $('#nav-mobile').css({ overflow: 'auto'}); } // Set checkbox on forms.html to indeterminate var indeterminateCheckbox = document.getElementById('indeterminate-checkbox'); if (indeterminateCheckbox !== null) indeterminateCheckbox.indeterminate = true; // Pushpin Demo Init if ($('.pushpin-demo-nav').length) { $('.pushpin-demo-nav').each(function() { var $this = $(this); var $target = $('#' + $(this).attr('data-target')); $this.pushpin({ top: $target.offset().top, bottom: $target.offset().top + $target.outerHeight() - $this.height() }); }); } // CSS Transitions Demo Init if ($('#scale-demo').length && $('#scale-demo-trigger').length) { $('#scale-demo-trigger').click(function() { $('#scale-demo').toggleClass('scale-out'); }); } // Plugin initialization $('.carousel').carousel(); $('.carousel.carousel-slider').carousel({ fullWidth: true, indicators: true, onCycleTo: function(item, dragged) { } }); $('.collapsible').collapsible(); $('.collapsible.expandable').collapsible({ accordion: false }); $('.dropdown-trigger').dropdown(); $('.slider').slider(); $('.parallax').parallax(); $('.materialboxed').materialbox(); $('.modal').modal(); $('.scrollspy').scrollSpy(); $('.datepicker').datepicker(); $('.tabs').tabs(); $('.timepicker').timepicker(); $('.tooltipped').tooltip(); $('select').not('.disabled').select(); $('.sidenav').sidenav(); $('.tap-target').featureDiscovery(); $('input.autocomplete').autocomplete({ data: {"Apple": null, "Microsoft": null, "Google": 'http://placehold.it/250x250'}, }); $('input[data-length], textarea[data-length]').characterCounter(); // Swipeable Tabs Demo Init if ($('#tabs-swipe-demo').length) { $('#tabs-swipe-demo').tabs({ 'swipeable': true }); } // Chips $('.chips').chips(); $('.chips-initial').chips({ readOnly: true, data: [{ tag: 'Apple', }, { tag: 'Microsoft', }, { tag: 'Google', }] }); $('.chips-placeholder').chips({ placeholder: 'Enter a tag', secondaryPlaceholder: '+Tag', }); $('.chips-autocomplete').chips({ autocompleteOptions: { data: { 'Apple': null, 'Microsoft': null, 'Google': null } }, }); // Fab $('.fixed-action-btn').floatingActionButton(); $('.fixed-action-btn.horizontal').floatingActionButton({ direction: 'left' }); $('.fixed-action-btn.click-to-toggle').floatingActionButton({ direction: 'left', hoverEnabled: false }); $('.fixed-action-btn.toolbar').floatingActionButton({ toolbarEnabled: true }); }); // end of document ready })(jQuery); // end of jQuery name space

Related: See More


Questions / Comments: