Question

我在angular2中使用materialize css作为我的应用程序，我已经添加了类滑块全屏，如此处Materializecss所述，以实现全屏

以下是我的HTML代码：

<div class="slider fullscreen" style="touch-action: pan-y;">
<ul class="slides">
<li class="active" style="opacity: 1; transform: translateX(0px) translateY(0px);">
  <img src="demo"> <!-- random image -->
  <div class="caption center-align" style="opacity: 1; transform: translateY(0px) translateX(0px);">
    <h3>This is our big Tagline!</h3>
    <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
  </div>
</li>
<li class="" style="opacity: 0; transform: translateX(0px) translateY(0px);">
  <img src="data"> <!-- random image -->
  <div class="caption left-align" style="opacity: 0; transform: translateX(-100px) translateY(0px);">
    <h3>Left Aligned Caption</h3>
    <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
  </div>
</li>
<li class="" style="opacity: 0; transform: translateX(0px) translateY(0px);">
  <img src="iage2"> <!-- random image -->
  <div class="caption right-align" style="opacity: 0; transform: translateX(100px) translateY(0px);">
    <h3>Right Aligned Caption</h3>
    <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
  </div>
</li>

滑块的CSS：

.slider.fullscreen {
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 }

申请上面后，我无法获得与上述相同的输出。滑块不起作用，它会覆盖其他组件，如Error Snap

注意：我已将内容放在不同的div类中，但仍然隐藏了其他内容。

Answer 1

在这里结识：

您没有包含jquery或实现js，并且必须包含滑块内容才能使用
您没有初始化全屏滑块，您可以使用
执行此操作 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
HTML无效：$('.carousel.carousel-slider').carousel({fullWidth: true});未关闭
您没有为全屏滑块添加一些实体化类

<强> Codepen Demo Here

使用materialize css创建fullpage滑块时的Erroe

1 个答案: