Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Carousel set height to 0 if the image is cached.

See original GitHub issue

Description

Repro Steps

Create a html in local server
image.jpg should be a local image, or a server support cache.

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <div class="carousel carousel-slider">
        <a class="carousel-item"><img src="image.jpg"></a>
        <a class="carousel-item"><img src="image.jpg"></a>
        <a class="carousel-item"><img src="image.jpg"></a>
        <a class="carousel-item"><img src="image.jpg"></a>
      </div>
      
      <a class="waves-effect waves-light btn">Force Resize</a>

      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
      <script>
        $('.carousel.carousel-slider').carousel({fullWidth: true});
        $('.btn').click(function () {
          $('.carousel').height(400);
        });
      </script>
    </body>
  </html>

Refresh the page

load event will not be trigger if a image cached, but I apply the fix, it also set the height to zero, refer to jQuery doc, it is bad to get a height of a hidden element.

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:10 (2 by maintainers)

Top GitHub Comments

4reactions

sigma-technologycommented, May 31, 2017

I’ve managed to make this responsive and get around the height issue by adding height: 450px !important to .carousel-slider and then have used the following jQuery to automatically resize it when the screen width changes.

function carouselHeight() {
    $('.carousel.carousel-slider').each(function() {
        var newHeight = $(this).find('.carousel-item img').height();
        var origStyle = $(this).attr('style');
        $(this).attr('style', origStyle+'; height: '+newHeight+'px !important');
    });
}
$(window).resize(function(){carouselHeight();});

carouselHeight() can also be called just after initialisation to fix the initial height issue.

1reaction

leonaditocommented, Oct 8, 2017

First we have a problem in height that does not adjust and is caught. Then we can not put the carousel in the desired width. When resizing the canvas in portrait or landscape on mobile devices, the carousel completely exits the screen configuration. Finally, it is not responsive. Not a desirable plugin. Automatic translator of portuguese