0

en mi proyecto de Laravel 8 estoy creando una parte donde pongo varias imágenes, para esto tengo un image slider, en realidad la idea es poner al menos 5 ya que eso es lo que necesito pero el problema está en que no sé como reutilizar este código y así poder tener varios.

En este momento tengo sólamente 2 sliders, sólamente uno me permite correr el código Javascript, que se encarga de avanzar o retroceder una imagen, cuando llegas al último hijo, el slider se vuelve a repetir. Estoy utilizando la propiedad CSS de transform para poder navegar a través de las imágenes.

Ambos tienen código in line de AlpineJS y llevan un @foreach. Estoy haciendo uso de una API en donde mando llamar varias imágenes tipo thumbnails y es en estos sliders en donde las coloco.

Como menciono, ambos están en la misma vista y ambos son una iteración del mismo componente Blade, la vista de welcome.blade.php, es donde incluyo el <script>.

Código del componente en donde se puede ver la estructura HTML, las variables dinámicas y el Javascript:

<h2 class="text-gray-500 font-semibold pl-4 mb-4">{{ $title }}</h2>

<div class="flex items-center justify-between w-full mx-auto absolute left-0 px-2 mt-10 ">
    <x-left-chevron>
    </x-left-chevron>

    <x-right-chevron>
    </x-right-chevron>
</div>

<div class="relative h-60 flex scroll-hide overflow-hidden overflow-x-auto">
    <div class="images flex p-2">
        {{ $slot }}
    </div>
</div>

<script>
    let next = document.querySelector('.next');
    let prev = document.querySelector('.prev');
    let images = document.querySelector('.images');
    let first_card_clone = images.children[0].cloneNode(true);
    let last_card_clone = images.children[images.children.length-1].cloneNode(true);

    images.insertBefore(last_card_clone, images.children[0]);
    images.appendChild(first_card_clone);

    images.style.transitionDuration = "0.0s";
    images.style.transform = `translate(-200px)`;

    let current_card = 1;

    next.addEventListener("click", () => {
        if (current_card < images.children.length - 1) {
            current_card++;

            images.style.transitionDuration = "0.5s";
            images.style.transform = `translate(-${current_card * 200}px)`;

            if (current_card === images.children.length - 1) {
                setTimeout(() => {
                    images.style.transitionDuration = "0.0s";
                    images.style.transform = `translate(-200px)`;
                    current_card = 1;
                }, 600);
            }

        } else {
            return;
        }
    });

    prev.addEventListener("click", () => {
        if (current_card > 0) {
            current_card--;

            images.style.transitionDuration = "0.5s";
            images.style.transform = `translate(-${current_card * 200}px)`;

            if (current_card === 0) {
                setTimeout(() => {
                    images.style.transitionDuration = "0.0s";
                    images.style.transform = `translate(-${(images.children.length - 2)* 350}px)`; 
                    current_card = images.children.length - 2;
                }, 600);
            }
            
        } else {
            return;
        }
    });
</script>

Este sería sólamente una iteración del componente que hago mencionar arriba, traté de no repetir el mismo código, en realidad ambos tienen las mismas propiedades:

<x-slider-thumbnails>
    <x-slot name="title">
        THPS4
    </x-slot>

    @foreach($thps4 as $thps4)
        <div 
            class="box mr-26 pt-4 rounded-md"
            x-data="{show: false}"
            x-on:mouseenter="show = true" 
            x-on:mouseleave="show = false"    
        >
            <img
                class="pr-2 cursor-pointer transition duration-500 ease-in-out transform hover:scale-105"
                src="{{ $thps4['Thumbnail'] }}" 
                alt=""
            >
            <div 
                class="relative bg-gray-600 h-14 p-2 grid grid-cols-2 items-center rounded-t-none rounded-md"
                x-show="show"
            >
                <svg
                    fill="currentColor"
                    class="w-8 h-8 cursor-pointer"
                    viewBox="0 0 20 20" 
                    version="1.1" 
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                    <g id="Page-1" stroke="none" stroke-width="1" fill="white" fill-rule="evenodd">
                        <g id="icon-shape">
                          // código SVG
                        </g>
                    </g>
                </svg>
                
                <p class="text-sm font-semibold absolute ml-11">
                    {{ $thps4['Title'] }}
                </p>
            </div>
        </div>
    @endforeach
</x-slider-thumbnails>

1 respuesta 1

0

Fue muy complicado y opté por usar una librería llamada FlickityJS. Pude implementar el código original adaptándolo a la estructura HTML que ya tenía ya que esta librería te permite utilizar atributos "data" en HTML la cuál no necesita de Javascript ya que puede ser dentro del elemento HTML, aunque si se desea se puede utilizar código Javascript.

Dejo aquí el resultado de la implementación que hice en mi página.

            <div 
                class="thps-carousel mb-8 py-2" 
                data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "pageDots": false, "groupCells": true }'>
                @foreach ($thug as $thug)
                    <div
                        class="box mr-26 carousel-cell h-64 rounded-b-none bg-gray-900 hover:rounded-md hover:bg-indigo-600
                               transition-all duration-500 ease-in-out transform hover:scale-105"
                        x-data="{show: false}"
                        x-on:mouseenter="show = true" 
                        x-on:mouseleave="show = false"
                    >
                        <img
                            class="px-2 pt-2"
                            src="{{ $thug['Thumbnail'] }}" 
                            alt=""
                        >
                        <div 
                            class="relative scale-105 h-14 p-2 grid grid-cols-2 items-center rounded-t-none rounded-md"
                            x-show="show"
                            style="width: 250px;"
                        >
                            <svg
                                fill="currentColor"
                                class="w-8 h-8 cursor-pointer"
                                viewBox="0 0 20 20" 
                                version="1.1" 
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                            >
                                <g id="Page-1" stroke="none" stroke-width="1" fill="white" fill-rule="evenodd">
                                    <g id="icon-shape">
                                        <path d="M2.92893219,17.0710678 C6.83417511,20.9763107 13.1658249,20.9763107 17.0710678,17.0710678 C20.9763107,13.1658249 20.9763107,6.83417511 17.0710678,2.92893219 C13.1658249,-0.976310729 6.83417511,-0.976310729 2.92893219,2.92893219 C-0.976310729,6.83417511 -0.976310729,13.1658249 2.92893219,17.0710678 L2.92893219,17.0710678 Z M15.6568542,15.6568542 C18.7810486,12.5326599 18.7810486,7.46734008 15.6568542,4.34314575 C12.5326599,1.21895142 7.46734008,1.21895142 4.34314575,4.34314575 C1.21895142,7.46734008 1.21895142,12.5326599 4.34314575,15.6568542 C7.46734008,18.7810486 12.5326599,18.7810486 15.6568542,15.6568542 Z M7,6 L15,10 L7,14 L7,6 Z" id="Combined-Shape"></path>
                                    </g>
                                </g>
                            </svg>
                            
                            <p class="text-sm font-semibold absolute ml-11">
                                {{ $thug['Title'] }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>

La clase .thps-carousel representa el contenedor de mi propio "slider" y la clase .carousel-cell es asignado a cada contenedor de imagen.

Al final el propósito era poder crear un componente que fuera reutilizable, dinámico y que pudiera adaptarse a mis necesidades, al final logre el resultado que esperaba encontrar. Utilize TailwindCSS para cambiar y adoptar estilos además de esto, pude cambiarle el estilo a las flechas de navegación que ya viene por default en la librería, le pude cambiar color, estado hover y demás con CSS.

La documentación y la instalación para la librería la dejo aquí: https://flickity.metafizzy.co/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.