Question

似乎在使用轮播时，指示器默认位于图像内部。

如何将它们放置在外面，但是无论您如何调整浏览器的大小，都必须与图像保持固定的距离？

在我的示例中，我为轮播设置了静态高度，但是如果您调整浏览器的大小，则指示器与图像的距离会有所不同。

我添加responsive-img以便图像缩放。

HTML：

<div class="row">
<div class="col s12 l6 black-text flow-text">
    <h2>Title</h2>
    <ul>
        <li>text text text</li>
        <li>text text text</li>
        <li>text text text</li>
        <li>text text text</li>
    </ul>
</div>
<div class=" col s12 l6 ">
    <div class="carousel carousel-slider">
        <div class="carousel-item ">
            <a href=" " target="_blank ">
                <img class="responsive-img " src="http://globalmedicalco.com/photos/globalmedicalco/1/3586.jpg " />
            </a>
        </div>
        <div class="carousel-item ">
            <a href=" " target="_blank ">
                <img class="responsive-img " src="http://globalmedicalco.com/photos/globalmedicalco/1/3586.jpg " />
            </a>
        </div>
        <div class="carousel-item ">
            <a href=" " target="_blank ">
                <img class="responsive-img " src="http://globalmedicalco.com/photos/globalmedicalco/1/3586.jpg " />
            </a>
        </div>
    </div>
</div>

CSS：

 .carousel{
    height:520px !important;
  }

I am the example

具体版本为Materialize v1.0.0-rc.2。

Answer 1

我的解决方案是更改materialize.js中的功能 _setCarouselHeight

this.$el.css('height', imageHeight + {variable distance}+ 'px');

获取指标不在实现轮播

1 个答案: