Edición, la parte del Modal, ¿en dónde se ven las imagenes?
Para mostrar las imágenes estoy utilizando un botón que inicia un modal. La función, show
hace que pueda ver el contenido gracias a que esta lleva una variable:
<button
onclick="$modals.show('faro-posts-img-modal-{{ $post->id }}')"
class="bg-blue-100 border-2 border-blue-500 text-sm rounded-md p-1 text-blue-500 hover:bg-blue-500 hover:border-none hover:text-white transition ease-in-out"
>
Mostrar
</button>
Este es el script, se despeja un "CustomEvent" y buscar la propiedad "hash":
<script>
window.$modals = {
show(hash) {
window.dispatchEvent(
new CustomEvent('modal', {
detail: hash
})
);
}
}
</script>
Como hash es la propiedad que la función intenta buscar en las etiquetas del componente y así poder abrir las imágenes correspondientes con un post:
<x-faro-posts-img-modal hash="faro-posts-img-modal-{{$post->id}}">
@foreach loop
@endforeach
</x-faro-posts-img-modal>
Existe un problema al cerrar el modal ya que para cerrar también se necesita un atributo como "#".
En la etiqueta: <a href="#">
tengo este símbolo: ×
que es mi botón para poder cerrar el modal pero pasa que la URL ahora se ve así: http://tweety.test/faro#
, esto ocasiona que cuando quiero abrir un nuevo modal y utilizar nuevamente el slider, no me permita poder ver las imágenes a menos que refresque la página.
Esta parte es el componente Blade:
<div class="fixed inset-0 flex items-center justify-center w-72 h-64 m-auto md:h-auto md:w-auto md:max-w-3xl md:my-5 md:mx-5 md:mx-auto bg-white rounded-md shadow-md overflow-x-auto md:overflow-hidden">
<a href="#"
class="absolute right-10 top-10 md:right-16 md:top-10 h-8 w-8 text-xl text-center flex items-center justify-center cursor-pointer hover:bg-gray-200 transition ease-in-out">
×
</a>
{{$slot}}
</div>
Es en la variable de {{$slot}}
en donde se está incluyendo el foreach loop
y en donde se aplica las clases del slider.