合并materialbox和carousel时实现错误

时间:2018-08-08 09:30:26

标签: javascript html css materialize

我正在使用物化,并且我有一个画廊,该画廊用自己的图像集来举行不同的活动,其中每组图像都显示为轮播。我想将其与材质框组合在一起,以便当用户单击当前图像时它将变为全屏显示。问题是某些旋转木马在单击图像时一直显示,这使我认为这是一个错误。如果您尝试使用此代码的示例:

有趣的是:仅显示图像下方的轮播会不断显示,而上方的轮播则不会,这就是为什么。

var options = {};

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.carousel');
  var instances = M.Carousel.init(elems, options);
});

$(document).ready(function() {
  $('.materialboxed').materialbox();
});
<div class="carousel">
  <a class="carousel-item" href="#e!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#ree!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#ur!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/5"></a>
</div>
<div class="carousel">
  <a class="carousel-item" href="#e!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#ree!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#ur!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/5"></a>
</div>
<div class="carousel">
  <a class="carousel-item" href="#e!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#ree!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#ur!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/5"></a>
</div>

0 个答案:

没有答案