Utilizo em meu site Carousel e Material Box para que o usuário possa clicar numa imagem e ela ser expandida. Percebi portanto que é possível o usuário arrastar (com mouse no pc ou dedo no mobile) para ir para a próxima imagem sem que o Material Box tenha sido fechado, fazendo com que a imagem que estava clicada fique com bordas acinzentadas.
Como poderia resolver esse caso?
Segue código para análise, mas caso seja melhor conferir diretamente do meu site, só ir na aba Galeria: https://modelo.sampa.br/
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!-- ABA GALERIA -->
<div id="galeria" class="container">
<div class="wrapper-carousel">
<h5 class="espaco_acima">Galeria 1</h5>
<div id="carousel-1" class="carousel">
<div class="carousel-item">
<img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
</div>
<div class="carousel-item">
<img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
</div>
<div class="carousel-item">
<img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
</div>
<div class="carousel-item">
<img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
</div>
<div class="carousel-item">
<img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
</div>
</div>
</div>
</div>
<!-- DEPENDÊNCIAS -->
<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Inicializar Materialize -->
<script>
M.AutoInit();
</script>
</body>