Bootstrap carousel - JavaScript not applying (DNN)

Question

Let me start by saying I have almost no understanding of JavaScript.

I have a Bootstrap (3) carousel, which contains images and text, of different quantities. When the carousel animates, all content below the carousel jumps as the carousel resizes its height according to the height of the content.

I have followed http://ryanringler.com/blog/2014/08/24/fixed-height-carousel-for-twitter-bootstrap which is designed to calculate the maximum height of the content within the carousel, and apply to each slide - preventing the jump of page content below the carousel. This has almost fixed the problem, but not quite.

It seems the javascript only applies after I resize the browser window. Having basically no understanding of how JS works, I was hoping there is a simple solution to this that someone might be able to help me with? I would be eternally greatful!

I have the following loaded in the Page Header Tags section of Page Settings > Advanced Settings in DNN.

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

I have the following loaded within script tags in an html module on the page:

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
    });
  }
}

Here is the page: http://mystate.com.au/about-us/contact-us/locations/launceston-branch

I have also noticed that sometimes the JS does apply if I press the scroll button immediately after page load, but if I wait a few seconds, it seems it doesn't.

Thanks for any help in advance!

VDWWD VDWWD · Accepted Answer · 2017-06-16T07:49:06

The Chrome console says: carouFredSel: No element found for "#carousel_2item" and also for #carousel_4item. You should probably fix that first.

Also the id carousel-id does not exist on your site. You probably need to replace that with the ID of your actual element. (try carousel-reviews)

Bootstrap carousel - JavaScript not applying (DNN)

1 Answers