Skip to content
Advertisement

Materialize css | js – visualization issue in the Carousel Slides

In the home page of my website there’s a Materialize carousel with 3 slides.

The page is a python flask template an the Materialize carousel is injected in the page, this is the base.html template

JavaScript

And this is the home.html template containing the carousel and the slides:

JavaScript

This is the Javascript that initialize the carousel:

JavaScript

The problem is this: when I load the page in the browser, the image is cutted and it remains cutted until I resize the screen, after resizing the screen the image dispays correctly: homePage

I tried to solve the issue adding into the .css file this:

JavaScript

but then I have problems with the mobile visualization: there’s empty space below the slide.

Last thig: images are all 3360 x 2240 pixels

I basically need to include the carousel in a way in which it will be visualized properly on laptop and mobile.

Advertisement

Answer

Basically the issue consists in the fact that the carousel is initialized before the images ar loaded and so the carousel height is not calculated properly. Initializing the carousel when all the page is loaded and not only the DOM will solve the issue:

JavaScript
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement