I have previously tried materialboxed for card images and it worked.
But when I use materialboxed for carousel images the result is different, not as good as the card image.
The fixed navigation bar and any of the elements below also look different from the card image, for which all the surrounding elements are invisible.
I have tried to edit css from materialize but still can't.
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>You wrote:
The navigation bar and any of the elements below also look different from the card image, for which all the surrounding elements are invisible.
Does this mean that when you are using the class materialboxed with the img tags in the carousel that the rest of the page does not become invisible/blacked-out when you click on the image?
Perhaps you have more code in your document that you did not share?
I was able to achieve the materialboxed effect in your carousel with this code:
<!DOCTYPE html>
<html>
<head>
<!-- IMPORT MATERIALIZE CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>
<!-- IMPORT MATERIALIZE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- INIT CAROUSEL -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems);
});
</script>
<!-- INIT MATERIALBOXED -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems);
});
</script>
</body>
</html>
See screen grab for result.
EDIT 2020-10-23:
Several assumptions for the following:
materialize.js is now local to the html file instead of imported from CDN. Also, the <nav> tag is now wrapped in a div with class="navbar-fixed" and id="fixed-nav":
<div id="fixed-nav" class="navbar-fixed">
<nav>
{...}
</nav>
</div>
In comments, OP clarified that he doesn't like the behavior when using materialboxed + carousel + navbar-fixed.
One solution would be to remove the class navbar-fixed from <nav>'s wrapper div when opening a carousel image and adding it back when closing.
At line 3590 and 3722 of materialize.js are the functions to open and close, respectively, an image with class materialboxed. Inside these functions, you can add the following to remove/add navbar-fixed from your wrapper with id fixed-nav:
Inside the open() function:
// remove navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.remove('navbar-fixed')
Inside the close() function:
// add navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.add('navbar-fixed')