Modificação na area do motorista

app/javascript/controllers/carrossel_controller.js

@@ -97,7 +97,7 @@ export default class extends Controller {
 
     if (!this.paginando) {
       this.itemTargets.forEach((item) => item.classList.remove("hidden"))
-      if (this.hasControlesTarget) this.controlesTarget.classList.add("hidden")
+      this.controlesTargets.forEach((el) => el.classList.add("hidden"))
       return
     }
 
@@ -109,15 +109,18 @@ export default class extends Controller {
     })
 
     if (!this.hasControlesTarget) return
-    this.controlesTarget.classList.remove("hidden")
+    this.controlesTargets.forEach((el) => el.classList.remove("hidden"))
 
-    if (this.hasIndicadorTarget) {
-      // "1–5 de 12" e não "página 1 de 3": quem lê quer saber quantos itens
-      // existem, não quantas páginas a tela tem.
-      this.indicadorTarget.textContent = `${inicio + 1}–${Math.min(fim, total)} de ${total}`
-    }
-    if (this.hasAnteriorTarget) this.alternar(this.anteriorTarget, this.pagina === 0)
-    if (this.hasProximoTarget)  this.alternar(this.proximoTarget, this.pagina >= this.totalPaginas - 1)
+    // "1–5 de 12" e não "página 1 de 3": quem lê quer saber quantos itens
+    // existem, não quantas páginas a tela tem.
+    const rotulo = `${inicio + 1}–${Math.min(fim, total)} de ${total}`
+    this.indicadorTargets.forEach((el) => { el.textContent = rotulo })
+
+    // Plural: o mesmo controle aparece em dois layouts (setas laterais em tela
+    // com espaço, barra flutuante no rodapé no celular) e os dois precisam
+    // desabilitar juntos.
+    this.anteriorTargets.forEach((b) => this.alternar(b, this.pagina === 0))
+    this.proximoTargets.forEach((b) => this.alternar(b, this.pagina >= this.totalPaginas - 1))
   }
 
   // Botão de ponta: desabilitado de verdade (não só apagado), para o toque não