title: Materialize CSS Carousel show indicators on mouseenter
body: <p>Hello I have a problem.</p>
  
  <p>I am trying to change the options of an Carousel instance on <code>mouseenter</code> event. What do I need to do in order to re-render the instance?</p>
  
  <p>My html:</p>
  
  <pre><code>  &lt;div class="carousel carousel-slider center"&gt;
      &lt;div class="carousel-fixed-item center"&gt;
        &lt;a class="btn waves-effect white grey-text darken-text-2"&gt;button&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item red white-text" href="#one!"&gt;
        &lt;h2&gt;First Panel&lt;/h2&gt;
        &lt;p class="white-text"&gt;This is your first panel&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item amber white-text" href="#two!"&gt;
        &lt;h2&gt;Second Panel&lt;/h2&gt;
        &lt;p class="white-text"&gt;This is your second panel&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item green white-text" href="#three!"&gt;
        &lt;h2&gt;Third Panel&lt;/h2&gt;
        &lt;p class="white-text"&gt;This is your third panel&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item blue white-text" href="#four!"&gt;
        &lt;h2&gt;Fourth Panel&lt;/h2&gt;
        &lt;p class="white-text"&gt;This is your fourth panel&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My js:</p>
  
  <pre><code>  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.carousel');
      var instances = M.Carousel.init(elems, {
            fullWidth: true,
            indicators: false
      });
    });
  
  document.querySelector('.carousel').
      addEventListener('mouseenter', function(event) {
        var elem = document.querySelector('.carousel');
        M.Carousel.getInstance(elem).options.indicators = true;
      });
  </code></pre>
  
  <p>Here is example on codepen: <a href="https://codepen.io/bearwithme/pen/MWaOvbX" rel="nofollow noreferrer">https://codepen.io/bearwithme/pen/MWaOvbX</a></p>