Bom dia. Para a página incial do meu site desenvolvi um slide de cards pela plataforma Glide.js. Fiz os códigos do slide em forma de uma função porque, na teoria, eu precisaria de vários slides formatados iguais, mas com títulos e temas de exibição diferentes. O problema é que quando eu chamo a mesma função mais de uma vez, apenas um slide funciona e os outros param. Acredito que esse problema esteja realcionado com o objeto Glide() (que está no final do código da função), mas não sei como resolver.
Código da função:
<?php
function slide($pesquisa,$titulo){
echo"
<div class='container'>
<div class='tit'>
<hr color='#2e2e2e'> $titulo <hr color='#2e2e2e'>
</div>
<div class='glide'>
<div class='glide__track' data-glide-el='track'>
<ul class='glide__slides'>
";
include 'conexao.php';
$sql = "SELECT * FROM produtos WHERE produto='$pesquisa' or marca='$pesquisa' or modelo='$pesquisa'";
$query = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($query)) {
$imagem = $row['imagem'];
$codigo = $row['codigo'];
$produto = $row['produto'];
$marca = $row['marca'];
$modelo = $row['modelo'];
$valor = $row['valor'];
$valorparc = 1.1 * $valor;
echo"
<li>
<form method='get' action='pgproduto'>
<input type='hidden' value='$codigo' name='comando'>
<button type='submit' class='image'> <img src='img/$imagem' /></button>
<button type='submit' class='nome'> $produto $modelo | $marca </button>
<div id='valor'>
<div class='valor'> R$$valor.00 </div>
<div class='info'> à vista </div>
</div>
<div id='valor'>
<div class='info2'> 10x de </div>
<div class='valor2'> R$$valorparc </div>
<div class='info3'> sem juros </div>
</div>
</form>
</li>
";}
echo "</ul>
</div>
<div class='glide__arrows' data-glide-el='controls'>
<button class='glide__arrow glide__arrow--left' data-glide-dir='<''>
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='#ff4f51' class='bi bi-caret-left-square' viewBox='0 0 16 16'>
<path d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/>
<path d='M10.205 12.456A.5.5 0 0 0 10.5 12V4a.5.5 0 0 0-.832-.374l-4.5 4a.5.5 0 0 0 0 .748l4.5 4a.5.5 0 0 0 .537.082z'/>
</svg>
</button>
<button class='glide__arrow glide__arrow--right' data-glide-dir='>'>
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='#ff4f51' class='bi bi-caret-right-square' viewBox='0 0 16 16'>
<path d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/>
<path d='M5.795 12.456A.5.5 0 0 1 5.5 12V4a.5.5 0 0 1 .832-.374l4.5 4a.5.5 0 0 1 0 .748l-4.5 4a.5.5 0 0 1-.537.082z'/>
</svg>
</button>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='glide.min.js'></script>
<script>
const config = {
type: 'carousel',
perView: 4,
perTouch: 5,
focusat: 0,
autoplay: 2000,
hoverpause: true,
keyboard: true,
bound: 5,
peek: {
before: 70,
after: 100
},
animationDuration: 1000,
move: 4,
};
new Glide('.glide', config).mount()
</script>";}?>
</body>
</html>
Código do Index:
<!DOCTYPE html>
<html>
<head>
<title> Stereo - Página Incial</title>
<link rel="stylesheet" type="text/css" href="css/meio.css">
<link rel="stylesheet" type="text/css" href="css/glide.core.min.css">
<link rel="stylesheet" type="text/css" href="css/glide.theme.css">
</head>
<body>
<?php
include "bases/banner.php";
include "bases/slide.php";
include "bases/slideMarcas.php";
?>
<div class="baixobanner">
<?php slide("violão", "Violões"); //apenas esse aqui funciona?>
<?php slide("violão", "Violões");?>
</div>
<?php include 'bases/footer.php';?>
</body>
</html>
Obrigado pala atenção