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>

请多谢我帮助解决此问题。

Answer 1

无需编写那么多jQuery

<! ––Just add the script tag like this in html-->
<script>M.AutoInit();</script>

实现CSS轮播指标不可点击

1 个答案: