Question

我对Materialize框架Carousel有问题。当它包含不同大小的图像时，第一个图像的大小将设置轮播的整个大小。想象一下，第一个轮播图片较小，第二个较大。这会导致不一致。

您认为我如何解决这个问题？我自己使用了此代码，但有时会响应，有时却没有，因为只是偶尔j等于tagimgs。

请记住，页面可能没有或没有轮播。我希望每个轮播的尺寸都基于轮播中可用的最大图像，而最小和最大轮播高度应为170至370。

slidersize = function(tag) {
  tagims = tag.find(".carousel-item img").length - 1;
  j = 0;
  flag = false;
  tag.find('.carousel').each(function(index, el) {
    $(this).find('img').on('load', function() {
      j += 1;
      console.log($(this).attr('src'));
      console.log('J:', j, 'count:', tagims);
      if (j == tagims)
        flag = true;
    });
  });

  intrv = setInterval(function() {
    if (flag == true) {
      tag.find(".carousel").each(function() {
        console.log($(this).attr('id'));
        var maxHeight = 0;
        oot = $(this);
        $(this).find('.carousel-item').each(function(index, el) {
          ot = $(this).find('img');
          if (ot.height() > maxHeight) {
            maxHeight = ot.height();
            oot.css("height", maxHeight);
            console.log('height', ot.height());
          }
          ot.css("margin-top", (ot.parent().parent().height() - ot.height()) / 2);
        });
      });
      clearInterval(intrv);
    }
  }, 1000);

.carouselpsts {
  min-height: 180px!important;
  max-height: 380px!important;
  height: unset
}

.carouselpsts a {
  min-height: 180px!important;
  max-height: 380px!important;
}

.carouselpsts img {
  width: auto!important;
  max-width: 100%!important;
  min-height: 170px!important;
  max-height: 370px!important;
  border-radius: 0.5rem;
  box-shadow: 0px 5px 5px #CCC
}

<div id="chq1AVtP" class="carousel carousel-slider carouselpsts center-align grey lighten-4">
  <a class="carousel-item center-align active" href="#one!" style="z-index: 0; opacity: 1; visibility: visible; transform: translateX(0px) translateX(0px) translateX(0px) translateZ(0px);"><img src="img/small/wKykxuzi5LysOllERTjA4a3EoVEf09EqyQIKhmHL.jpeg" name="img/wKykxuzi5LysOllERTjA4a3EoVEf09EqyQIKhmHL.jpeg" class="viewmodal" images="true"></a>
  <a class="carousel-item center-align" href="#one!" style="transform: translateX(0px) translateX(-565px) translateZ(0px); z-index: -1; opacity: 1; visibility: visible;"><img src="img/small/TndFJ04yuyTw5MT43aJeQjqNI05bx9CgpWhQCpcI.jpeg" name="img/TndFJ04yuyTw5MT43aJeQjqNI05bx9CgpWhQCpcI.jpeg" class="viewmodal" images="true"></a>
  <i class="material-icons leftar">keyboard_arrow_left</i>
  <i class="material-icons rightar">keyboard_arrow_right</i>
  <ul class="indicators">
    <li class="indicator-item active"></li>
    <li class="indicator-item"></li>
  </ul>
</div>

用不同大小的图像实现轮播

0 个答案: