Materialize Material Box & Sliders

Materialize Material Box & sliders

in this tutorial, you will learn about Material Box and sliders. Each and every concept is mentioned with the help of different examples.

Materialize Box

Material box is basically a material design implementation of the Lightbox plugin. Whenever, user clicks on the image then Material Box enlarge the image as well as center the image smoothly.

How To Create Materialize Box

To create Materialize Box follow the following steps.

  • Step:1 - Add the .materialboxed class to the <img> image element base class.
    Collapsible Header & Body
    
        <img class="materialboxed" src="..."  alt="Material Box">          
       
  • Step:2 - Initialize Materialize Box using Javascript or jQuery.
    Initialization
    
        //Javascript
     document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.materialboxed');
        var instances = M.Materialbox.init(elems, options);
      });
    
     // Or with jQuery
    
     $(document).ready(function(){
        $('.materialboxed').materialbox();
      });
       

General Syntax

<img class="materialboxed" src="..."  alt="Material Box">    
Try It Now

Source Code

Download
<img class="materialboxed" src="../code-support/images/slider/bird.jpg" alt="Material Box">    
Try it yourself

Source Code : Output

Material Box

Material Box Caption

It is very easy to add a short caption to your photo. Just add the caption as a data-caption attribute.

General Syntax

<img class="materialboxed" data-caption="Write down caption of the image" alt="Caption concept" >    
Try It Now

Source Code

Download
<img class="materialboxed" data-caption="This is a beautiful picture." src="../code-support/images/slider/bird.jpg" alt="Caption concept">    
Try it yourself

Source Code : Output

Caption concept

Materialize Slider

It is a simple and elegant image carousel that also contains captions that will be transitioned on their own depending on their alignment. It shows the slider indicators on the bottom of the slider.

How To Create Materialize Slider

To create Materialize Slider follow the following steps.

  • Step:1 - Add .slider class to the slider container element i.e <div>.
    Slider Container
    
        <div class="slider"></div>
       
  • Step:2 - Add .slides class to the <ul> element class and put it inside the slider container.
    Slides
      
      <div class="slider">
         <ul class="slides"></ul>
      </div>  
       
  • Step:3 - Write down slider content inside the unordered list items.
    Slider Content
       
    <div class="slider">
    <ul class="slides">
       <li>
        <img src=".." alt="Slider Image"> 
          <div class="caption center-align">
            <h3>Slider Heading</h3>
            <h5 class="light grey-text text-lighten-3">Slider Sub Heading.</h5>
          </div>
       </li>   
    </ul>
    </div>  
       
  • Step:4 - Initialize the slider using either Javascript or jQuery.
    Initialization
       
       //Javascript 
     document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.slider');
        var instances = M.Slider.init(elems, options);
      });
      // Or with jQuery
      $(document).ready(function(){
        $('.slider').slider();
      });
       

Source Code

Download
<div class="slider">
    <ul class="slides">
      <li>
        <img src="https://lorempixel.com/580/250/nature/1"> <!-- 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://lorempixel.com/580/250/nature/2"> <!-- 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://lorempixel.com/580/250/nature/3"> <!-- 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>
      <li>
        <img src="https://lorempixel.com/580/250/nature/4"> <!-- 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>
    </ul>
  </div>    
Try it yourself

Source Code : Output

  • This is our big Tagline!

    Here's our small slogan.
  • Left Aligned Caption

    Here's our small slogan.
  • Right Aligned Caption

    Here's our small slogan.
  • This is our big Tagline!

    Here's our small slogan.

Fullscreen Slider

You can easily make full screen slider by adding the fullscreen class to the slider div having .slider class.

General Syntax

<div class="slider fullscreen">
  <ul class="slides"></ul>
</div>    
Try It Now

Source Code

Download
<div class="slider fullscreen">
  <ul class="slides">
    <li>
      <img src="../code-support/images/slider/bird.jpg"> <!-- 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="../code-support/images/slider/lily.jpg"> <!-- 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="../code-support/images/slider/rose.jpg"> <!-- 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>    
Try it yourself

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS