2
I use on my website Carousel and Material Box so that the user can click on an image and it can be expanded. I therefore realized that it is possible for the user to drag (with mouse on the pc or finger on the mobile) to go to the next image without the Material Box has been closed, causing the image that was clicked to have gray edges.
How could I solve this case?
Follow code for analysis, but if it is better to check directly from my site, just go to the Gallery tab: 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>
on the desktop really worked, but I realized that on mobile this didn’t work, I tried to use
.carousel-item.active
along with.materialboxed.active
function, but not yet, what it recommends to work?– Deivid Souza
I’ll take a look and give you an answer.
– Sam
Just add the event
touchstart
, being like this:"mousedown touchstart"
– Sam