Materialize Material Box And sliders

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();
    });
     

Material Box Caption

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

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();
    });
     

Fullscreen Slider

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