Question

我正在使用materialize css制作角度为2的小型演示网站。我正面临一些与slider.Slider不合适的问题。这是我的代码：

    <div class="navbar-fixed">
 <nav class=" blue z-depth-1">

        <div style="margin-right:70px;" class="nav-wrapper">
            <a class="brand-logo ">
                <i class="material-icons hide-on-small-only hide-on-small-
                    and-down">cloud</i>Demo
            </a>
            <a href="#" data-activates="mobile-demo" class="button-
                     collapse">
                <i class="material-icons">menu</i>
            </a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>

            </ul>


            </div>

        </nav>
    </div>

      <div materialize="slider" [materializeActions]="actions" >
      <ul materialize="slides">
      <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
    <div class="caption center-align">
      <h3>This is our big Tagline!</h3>
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
    </div>
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
    <div class="caption left-align">
      <h3>Left Aligned Caption</h3>
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
    </div>
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
    <div class="caption right-align">
      <h3>Right Aligned Caption</h3>
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.
      </h5>
     </div>
    </li>
     <li>
     <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
     <div class="caption center-align">
      <h3>This is our big Tagline!</h3>
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.
      </h5>
    </div>
     </li>
   </ul>
   </div>

有谁能告诉我我做错了什么？为什么我的滑块处于垂直位置？我想要导航下面的全宽度滑块。任何帮助将不胜感激

Answer 1

我遇到了同样的问题，我只需在文档中的示例中添加materialize =“slider”就解决了这个问题。

<div class="slider" materialize="slider">
    <ul class="slides">
      <li>
        <img src="https://lorempixel.com/580/250/nature/1"> <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/2"> <!-- random image -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/3"> <!-- random image -->
        <div class="caption right-align">
          <h3>Right Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/4"> <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>
  </div>

角度2物化滑块不合适

1 个答案: