如何定位 Materialise CSS 活动轮播项目？

Question

我目前正在开发一个网站，但在涉及 Materialise CSS 轮播时遇到了一些麻烦。轮播本身看起来和功能都很好，但我正在尝试编写一个 jQuery 命令来显示当前活动的轮播项目文本。总而言之，我在每个图像下方都有一个 P 标签，并且希望 P 标签仅在当前轮播项目上显示，并在单击不同的轮播项目时淡出，然后出现该轮播项目的文本......等等等等。 Bootstrap 有更多关于如何定位其活动项目的文档，但 Materialize 在它的文档中没有关于它的任何内容......我觉得这将是一个很棒的效果，但我对如何实现它有点困惑。

我使用库存图片制作了设置的 JS Fiddle：fiddle

如果有人对此有任何指示，我将不胜感激！

<div class="carousel">
  <a class="carousel-item">
    <img src="https://picsum.photos/g/200/300">
    <p>Nala</p>
  </a>
  <a class="carousel-item">
    <img src="https://picsum.photos/g/200/300">
    <p>Kinzasha</p>
  </a>
  <a class="carousel-item">
    <img src="https://picsum.photos/g/200/300">
    <p>Simba</p>
  </a>
  <a class="carousel-item">
    <img src="https://picsum.photos/g/200/300">
    <p>Kemba</p>
  </a>
  <a class="carousel-item">
    <img src="https://picsum.photos/g/200/300">
    <p>Zefir</p>
  </a>
</div>

还有 jQuery

$('.carousel').carousel({
dist:0,
shift:0,
padding:20,
});

还有 CSS

.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;
}

Answer 1

您需要调整另一个框架来实现这一点。或者你可以做一些技巧，比如增加图像及其父 div 的高度。

$('.carousel').carousel({
    dist:20,
    shift:0,
    padding:0,
    indicators:true
  });

https://jsfiddle.net/sgrdy3dr/27/