javascript - Bootstrap 轮播 - JavaScript 不适用(DNN)

Question

首先我要说的是我对 JavaScript 几乎一无所知。

我有一个 Bootstrap (3) 轮播，其中包含不同数量的图像和文本。当轮播动画时，轮播下方的所有内容都会跳跃，因为轮播会根据内容的高度调整其高度。

我已关注http://ryanringler.com/blog/2014/08/24/fixed-height-carousel-for-twitter-bootstrap它旨在计算轮播内内容的最大高度，并应用于每张幻灯片 - 防止轮播下方的页面内容跳转。这几乎解决了问题，但还没有完全解决。

看来 javascript 仅在我调整浏览器窗口大小后才适用。由于基本上不了解 JS 的工作原理，我希望有一个简单的解决方案，有人可以帮助我？我将永远感激不已!

我在 DNN 中的页面设置 > 高级设置的页面标题标签部分加载了以下内容。

window.onload = function() {
  carouselNormalization();
}

我在页面上的 html 模块的脚本标记中加载了以下内容:

function carouselNormalization() {
  var items   = $('#carousel-reviews .item'),              // grab all the slides
      heights = [],                                   // array to store heights
      tallest;                                        // tallest slide

  if (items.length) {
    function normalizeHeights() {
      items.each(function() {
        heights.push($(this).height());               // add each slide's height
      });                                             // to the array

      tallest = Math.max.apply(null, heights);        // find the largest height

      items.each(function() {
        $(this).css('min-height', tallest + 'px');    // set each slide's minimum
      });                                             // height to the largest
    };

    normalizeHeights();

    $(window).on('resize orientationchange', function() {
      tallest = 0, heights.length = 0;               // reset the variables

      items.each(function() {
        $(this).css('min-height', '0');              // reset each slide's height
      });

      normalizeHeights();                            // run it again
    });
  }
}

这是页面:http://mystate.com.au/about-us/contact-us/locations/launceston-branch

我还注意到，有时如果我在页面加载后立即按下滚动按钮，JS 确实会应用，但如果我等待几秒钟，似乎不会应用。

感谢您提前提供的任何帮助!

Answer 1

Chrome 控制台显示:carouFredSel: No element found for "#carousel_2item"也适用于#carousel_4item 。你可能应该先解决这个问题。

还有 ID carousel-id您的网站上不存在。您可能需要将其替换为实际元素的 ID。 (尝试carousel-reviews)