Question

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

我使用库存图片制作了JS小提琴：[{3}}

如果有人对此有任何指示，我真的很感激！

FutureOption[T]

和jQuery

<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>

和CSS

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

Answer 1

您需要调整另一个框架来实现这一目标。或者你可以做的就像增加图像的高度及其父div一样。

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

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

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

1 个答案: