Materialise Carousel中的iframe无法正常工作

Question

In Materialize Carousel method instead of normal images, I have inserted Iframe to embed a web link in slides. On inserting Iframes, clicking to switch slide doesn't work.

Carousel Method:

<div class="carousel">
    <a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
    <a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
    <a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
    <a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
</div>

The non active slides are not clickable. On clicking, they don't get activated. Kindly help me find a solution

Answer 1

In the iframe's style attribute, add:

pointer-events: none;

to disable click events on the iframe. This will make sure click events correctly bubble up to the Materialize Carousel plugin.