Orca Slide

OrcaSlide Un Slider básico creado con JS nativo. El propósito de este desarrollo es evitar el uso de librerías qua a futuro causan problemas de compatibilidad al tener que convivir con otros paquetes o funcionalidades y evitar la imposición de una estrucura HTML que difiera de tu proyecto.

💾 Instalación

Se puede instalar desde NPM o Yarn:

npm i orcaslide

o

yarn add orcaslide

⚙️ Uso

Para utilizar OrcaSlide es necesario conocer las posibles configuraciones básicas de las que dispone el paquete, a futuro se tiene contemplado permitir el manejo de más configuraciones y opciones.

| Campo | Tipo de dato | Valor por defecto | Descripción | |-------------------|:------------:|:-----------------:|-------------| | arrowPrevious | String | N/A | Selector referente al botón para la acción Previus.| | arrowNext | String | N/A | Selector referente al botón para la acción Next.| | autoPlay | Boolean | false | Permite indicar si el slider cuenta con autoplay| |callbacks | Array | [] | Permite realizar carga de eventos cada vez que se pase un slide, para visualisar el uso de esta funcionalidad podemos ver lo en el apartado 💡 Ejemplo. | contentItem | String | N/A | Selector referente al Contenedor de los items del Slide.| | ctrlStop | String | N/A | Selector referente al botón para la acción detener el autoPlay| | ctrlPlay | String | N/A | Selector referente al botón para la acción reiniciar el autPlay| | isInfinite | Boolean | false | Indica si el Slide es Finito o Infinito.| | time | Number | 1 = segundo | Tiempo en el que se realiza transición del Slide.| | timeAutoPlay | Number | 1 = segundo | Tiempo en el que se pasa automática al siguiente Slide.|

Nota: Los selectores que se necesitan utilizar dentro del Slide tienen que ser selectores como los que se utilizan en CSS, ya que para JS son compatibles al usar querySelector.

💡 Ejemplo

    // Carga del paquete
    import OrcaSlide from "orcaslide";

    // configuración de ejemplo para el uso de los callbacks.
    const CONFIG_CALLBACKS = [
        {
            /**
             * Se indica la función que se desea ejecutar.
             * Nota: Automaticamente orca slide manda para metros con informacion sobre el slide
             * estos parametros son opcioneles
             */
            callback: (paramsByOrca) => { console.log("PASE o REGRESE => Slide 2"); },
            /**
             * Indica en que posición del slide se ejecuta el callback
             */
            slide: 2,
            /*
             * esto indica si el evento se realiza al pasar el slider.
             * por defecto el valor es false,
            **/
            next: true,
            /*
             * esto indica si el evento se realiza al retroceder un slider.
             * por defecto el valor es false,
            **/
            previus: true,
        },
        {
            callback: () => { console.log("PASE o REGRESE => Slide 3"); },
            slide: 3,
            next: true,

        },
    ];

    // Seteo de la configuración e inicialización
    OrcaSlide.config = {
        arrowPrevious: "#arrow_previus",
        arrowNext: "#arrow_next",
        callbacks: CONFIG_CALLBACKS,
        ctrlStop: "#stop",
        ctrlPlay: "#play",
        contentItem: "#swipe",
        time: 1,
        timeAutoPlay: 2.5,
        isInfinite: true,
    };

Nota: Al pasar

🚧 Estructura HTML

Nuestra estructura básica de HTML para correr el OrcaSlider consta de las siguientes partes:

| Elementos | Descripción | |----------:|-------------| |Slider:| Es el componente que contendrá la lógica y los elementos básicos necesarios para la funcionalidad del Slider.| |Flechas/Botones:| Son los elementos que reciben los eventos para recorrer los Items/Cards en el Track.| |Contenedor:| Este elemento es el que mantiene al Track y sus Items en posición.| |Track/Riel:| Este bloque al ser contenedor directo de los items, siempre deberá contar con una propiedad de overflow: hidden;.| |Items:| También conocidos como Cards o Unicades Mínimas, son los contenedores de otros elementos de interacción; botones, enlances, texto, imágenes.| |Icons:| Se tienen contemplados los espacios para poder pasar mediante estilos cualquier icono que recida en una tipografía.| |Card:| Es el área destinada a contener título, texto y/o algún elemento extra de identidad.| |Controls/Indicadores:| Son la referencia visual y funcional que le permiten saber al usuario cuantos slides tiene el slider y/o saltar de uno a otro dependiendo sus necesidades.|

<!-- Slider -->
<section class="Slider">

    <!-- Previous Arrow -->

    <div class="Slider__ArrowPrevious">

        <!-- Button | Arrow -->

        <button class="Icon" id="arrow_previus">
            <span class="Display">Previous Arrow</span>
        </button><!-- /Button | Arrow -->

    </div><!-- /Previous Arrow -->

    <!-- Content -->

    <div class="Slider__Content">

        <!-- Track -->

        <div class="Slider__Track" id="swipe">

            <!-- Item | Card | Unidad Mínima -->

            <div class="Card">

                <!-- Card Content -->

                <img class="Card__Image" src="./img/1.png" alt="My Wonderful Image">

                <!-- /Card Content -->

            </div><!-- /Item | Card | Unidad Mínima -->

        </div><!-- /Track -->

    </div><!-- /Content -->

    <!-- Next Arrow -->

    <div class="Slider__ArrowNext">

        <!-- Button | Arrow -->

        <button class="Icon" id="arrow_next">
            <span class="Display">Next Arrow</span>
        </button><!-- Button | Arrow -->

    </div><!-- /Next Arrow -->

</section><!-- /Slider -->

🏗️ Changelog

v1.0.2

• Se estandariza funcionalidad de las flechas entre Slider y Carouseles
• Se optimiza la carga de la funcionalidad de Orcaslide cuando es inocada

🌎 Team

| | | | |:------------:|:------------:|:------------:| |Jorge (Konami12) |Shannonbit (Shannonbit) |Alan Mena (Kolibri) | | | | | |