orcaslide

1.0.8 • Public • Published

Orca Slide

OrcaSlide badge

GitHub version

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 Install

npm i orcaslide

o

Yarn Install

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)

Readme Version

Package Sidebar

Install

npm i orcaslide

Weekly Downloads

1

Version

1.0.8

License

MIT

Unpacked Size

20.9 kB

Total Files

10

Last publish

Collaborators

  • konami12
  • the-kolibri
  • shann0nb1t