Индикаторы материализации CSS карусели не кликабельны

Question

Материализация CSS-индикаторов карусели не активируется, я устанавливаю карусель на полную ширину, а высота на высоту окна. Используемая мной версия Materialise CSS - 0.100.2. Индикаторы видны и при наведении на них не нажимается. Я приложил код ниже.

function setCarouselHeight() {
  var hero = $("#hero").offset();
  var windowHeight = $(window).height();
  var carouselHeight = windowHeight - hero.top;
  $("#hero").css("height", carouselHeight + "px");
  $(".carousel-img").css("height", carouselHeight + "px");
}

function setCarouselAutoplay() {
  $('.carousel').carousel('next');
  setTimeout(setCarouselAutoplay, 4500);
}
$(document).ready(() => {
  setCarouselHeight();
  $('.carousel').carousel({
    dist: -40,
    padding: 0,
    fullwidth: true,
    indicators: true,
    duration: 100
  });
  setCarouselAutoplay();
});

.carousel1 {
  background-image: url(../images/carousel/img6.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: linear-gradient(to right, #A1FFCE, #FAFFD1);
  filter: grayscale(0.5);
}

<div id="hero" class="carousel carousel-slider pullup">
  <div class="carousel-item">
    <div class="carousel-img carousel1"></div>
  </div>
  <div class="carousel-item">
    <div class="carousel-img carousel2"></div>
  </div>
  <div class="carousel-item">
    <div class="carousel-img carousel3"></div>
  </div>
  <div style="position: absolute;top:100px;font-size: 18px;">
    <p>farmers</p>
  </div>
</div>

Помогите мне решить эту проблему, заранее спасибо.