title: How to target Materialize CSS active carousel item?
body: <p>I am currently working on a website and ran into some trouble when it came to the Materialize CSS carousel. The carousel itself looks and functions fine but I am trying to write a jQuery command that displays the current active carousel items text. To sum it up, I have a P tag underneath each image and would like the P tag to show only when on the current carousel item and fade out when a different carousel item is clicked and then for that carousel items text to appear... so on and so forth. Bootstrap has more documentation on how to target their active item but Materialize has nothing in it's documentation about it... I feel like it would be an awesome effect but I'm kind of stumped on how to achieve it.</p>
  
  <p>I made a JS Fiddle of the setup using stock images: <a href="https://jsfiddle.net/sgrdy3dr/14/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>If anyone has any pointers on this I'd really appreciate it!</p>
  
  <pre><code>&lt;div class="carousel"&gt;
    &lt;a class="carousel-item"&gt;
      &lt;img src="https://picsum.photos/g/200/300"&gt;
      &lt;p&gt;Nala&lt;/p&gt;
    &lt;/a&gt;
    &lt;a class="carousel-item"&gt;
      &lt;img src="https://picsum.photos/g/200/300"&gt;
      &lt;p&gt;Kinzasha&lt;/p&gt;
    &lt;/a&gt;
    &lt;a class="carousel-item"&gt;
      &lt;img src="https://picsum.photos/g/200/300"&gt;
      &lt;p&gt;Simba&lt;/p&gt;
    &lt;/a&gt;
    &lt;a class="carousel-item"&gt;
      &lt;img src="https://picsum.photos/g/200/300"&gt;
      &lt;p&gt;Kemba&lt;/p&gt;
    &lt;/a&gt;
    &lt;a class="carousel-item"&gt;
      &lt;img src="https://picsum.photos/g/200/300"&gt;
      &lt;p&gt;Zefir&lt;/p&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the jQuery</p>
  
  <pre><code>$('.carousel').carousel({
  dist:0,
  shift:0,
  padding:20,
  });
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>.carousel {
  min-height: 480px;
  }
  .carousel-item {
  height: 300px;
  width: 300px;
  text-decoration: none;
  }
  
  img {
  height: 300px;
  width: 300px;
  }
  
  p {
  font-size: 1em;
  color: red;
  text-align: center;
  text-decoration: none;
  }
  </code></pre>