{"id":19551402,"url":"https://github.com/orcaslide/orcaslide","last_synced_at":"2026-05-06T14:39:58.807Z","repository":{"id":57316054,"uuid":"130437306","full_name":"OrcaSlide/orcaslide","owner":"OrcaSlide","description":"OrcaSlide","archived":false,"fork":false,"pushed_at":"2023-02-25T01:29:07.000Z","size":148,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-21T17:47:41.258Z","etag":null,"topics":["freejquery","javascript","npm","orca","slider","swipe","tocuh","yarn"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OrcaSlide.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-21T03:43:39.000Z","updated_at":"2024-10-25T20:58:49.000Z","dependencies_parsed_at":"2025-01-08T20:23:02.637Z","dependency_job_id":"b587d00a-79f5-4d7d-a449-70c7754ff89f","html_url":"https://github.com/OrcaSlide/orcaslide","commit_stats":{"total_commits":114,"total_committers":6,"mean_commits":19.0,"dds":"0.45614035087719296","last_synced_commit":"859b89c7811de25e16b3b1e5e04c514a57312140"},"previous_names":["konami12/orcaslide"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrcaSlide%2Forcaslide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrcaSlide%2Forcaslide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrcaSlide%2Forcaslide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OrcaSlide%2Forcaslide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OrcaSlide","download_url":"https://codeload.github.com/OrcaSlide/orcaslide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240807564,"owners_count":19860772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["freejquery","javascript","npm","orca","slider","swipe","tocuh","yarn"],"created_at":"2024-11-11T04:13:47.510Z","updated_at":"2026-04-01T20:34:28.618Z","avatar_url":"https://github.com/OrcaSlide.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Orca Slide\n\n[![OrcaSlide badge](https://img.shields.io/badge/OrcaSlide-Stable-green.svg)](https://github.com/konami12/orcaslide)\n\n[![GitHub version](https://badge.fury.io/gh/konami12%2Forcaslide.svg)](https://badge.fury.io/gh/konami12%2Forcaslide)\n\n*OrcaSlide* Un Slider básico creado con **JS** **nativo**. El propósito de este desarrollo es evitar el uso de\nlibrerí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.\n\n##  💾 Instalación\n\nSe puede instalar desde NPM o Yarn:\n\n[![NPM Install](https://img.shields.io/badge/Install-NPM-brightgreen.svg)](https://www.npmjs.com/)\n\n```\nnpm i orcaslide\n```\no\n\n[![Yarn Install](https://img.shields.io/badge/Install-Yarn-blue.svg)](https://yarnpkg.com/en/)\n\n```\nyarn add orcaslide\n```\n\n## ⚙️ Uso\n\nPara utilizar *OrcaSlide* es necesario conocer las posibles configuraciones básicas de las que dispone\nel paquete, a futuro se tiene contemplado permitir el manejo de más configuraciones y opciones.\n\n\n| Campo             | Tipo de dato | Valor por defecto | Descripción |\n|-------------------|:------------:|:-----------------:|-------------|\n| **arrowPrevious** | *String*     | `N/A`             | Selector referente al botón para la acción **Previus**.|\n| **arrowNext**     | *String*     | `N/A`             | Selector referente al botón para la acción **Next**.|\n| **autoPlay**      | *Boolean*    | `false`           | Permite indicar si el slider cuenta con **autoplay**|\n|**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](#-ejemplo).\n| **contentItem**   | *String*     | `N/A`             | Selector referente al **Contenedor** de los items del Slide.|\n| **ctrlStop**      | *String*     | `N/A`             | Selector referente al botón para la acción detener el **autoPlay**|\n| **ctrlPlay**      | *String*     | `N/A`             | Selector referente al botón para la acción reiniciar el **autPlay**|\n| **isInfinite**    | *Boolean*    | `false`           | Indica si el Slide es **Finito** o **Infinito**.|\n| **time**          | *Number*     | `1 = segundo`     | **Tiempo** en el que se realiza transición del Slide.|\n| **timeAutoPlay**  | *Number*     | `1 = segundo`     |  **Tiempo** en el que se pasa automática al siguiente Slide.|\n\n\u003e **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`.\n\n## 💡 Ejemplo\n\n```javascript\n    // Carga del paquete\n    import OrcaSlide from \"orcaslide\";\n\n    // configuración de ejemplo para el uso de los callbacks.\n    const CONFIG_CALLBACKS = [\n        {\n            /**\n             * Se indica la función que se desea ejecutar.\n             * Nota: Automaticamente orca slide manda para metros con informacion sobre el slide\n             * estos parametros son opcioneles\n             */\n            callback: (paramsByOrca) =\u003e { console.log(\"PASE o REGRESE =\u003e Slide 2\"); },\n            /**\n             * Indica en que posición del slide se ejecuta el callback\n             */\n            slide: 2,\n            /*\n             * esto indica si el evento se realiza al pasar el slider.\n             * por defecto el valor es false,\n            **/\n            next: true,\n            /*\n             * esto indica si el evento se realiza al retroceder un slider.\n             * por defecto el valor es false,\n            **/\n            previus: true,\n        },\n        {\n            callback: () =\u003e { console.log(\"PASE o REGRESE =\u003e Slide 3\"); },\n            slide: 3,\n            next: true,\n\n        },\n    ];\n\n    // Seteo de la configuración e inicialización\n    OrcaSlide.config = {\n        arrowPrevious: \"#arrow_previus\",\n        arrowNext: \"#arrow_next\",\n        callbacks: CONFIG_CALLBACKS,\n        ctrlStop: \"#stop\",\n        ctrlPlay: \"#play\",\n        contentItem: \"#swipe\",\n        time: 1,\n        timeAutoPlay: 2.5,\n        isInfinite: true,\n    };\n```\n\n\u003e **Nota:** Al pasar\n\n\n## 🚧 Estructura HTML\n\nNuestra estructura básica de HTML para correr el OrcaSlider consta de las siguientes partes:\n\n| Elementos | Descripción |\n|----------:|-------------|\n|**Slider:**| Es el componente que contendrá la lógica y los elementos básicos necesarios para la funcionalidad del Slider.|\n|**Flechas/Botones:**| Son los elementos que reciben los eventos para recorrer los Items/Cards en el Track.|\n|**Contenedor:**| Este elemento es el que mantiene al Track y sus Items en posición.|\n|**Track/Riel:**| Este bloque al ser contenedor directo de los items, siempre deberá contar con una propiedad de ```overflow: hidden;```.|\n|**Items:**| También conocidos como Cards o Unicades Mínimas, son los contenedores de otros elementos de interacción; botones, enlances, texto, imágenes.|\n|**Icons:**| Se tienen contemplados los espacios para poder pasar mediante estilos cualquier icono que recida en una tipografía.|\n|**Card:**| Es el área destinada a contener título, texto y/o algún elemento extra de identidad.|\n|**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.|\n\n```html\n\n\u003c!-- Slider --\u003e\n\u003csection class=\"Slider\"\u003e\n\n    \u003c!-- Previous Arrow --\u003e\n\n    \u003cdiv class=\"Slider__ArrowPrevious\"\u003e\n\n        \u003c!-- Button | Arrow --\u003e\n\n        \u003cbutton class=\"Icon\" id=\"arrow_previus\"\u003e\n            \u003cspan class=\"Display\"\u003ePrevious Arrow\u003c/span\u003e\n        \u003c/button\u003e\u003c!-- /Button | Arrow --\u003e\n\n    \u003c/div\u003e\u003c!-- /Previous Arrow --\u003e\n\n    \u003c!-- Content --\u003e\n\n    \u003cdiv class=\"Slider__Content\"\u003e\n\n        \u003c!-- Track --\u003e\n\n        \u003cdiv class=\"Slider__Track\" id=\"swipe\"\u003e\n\n            \u003c!-- Item | Card | Unidad Mínima --\u003e\n\n            \u003cdiv class=\"Card\"\u003e\n\n                \u003c!-- Card Content --\u003e\n\n                \u003cimg class=\"Card__Image\" src=\"./img/1.png\" alt=\"My Wonderful Image\"\u003e\n\n                \u003c!-- /Card Content --\u003e\n\n            \u003c/div\u003e\u003c!-- /Item | Card | Unidad Mínima --\u003e\n\n        \u003c/div\u003e\u003c!-- /Track --\u003e\n\n    \u003c/div\u003e\u003c!-- /Content --\u003e\n\n    \u003c!-- Next Arrow --\u003e\n\n    \u003cdiv class=\"Slider__ArrowNext\"\u003e\n\n        \u003c!-- Button | Arrow --\u003e\n\n        \u003cbutton class=\"Icon\" id=\"arrow_next\"\u003e\n            \u003cspan class=\"Display\"\u003eNext Arrow\u003c/span\u003e\n        \u003c/button\u003e\u003c!-- Button | Arrow --\u003e\n\n    \u003c/div\u003e\u003c!-- /Next Arrow --\u003e\n\n\u003c/section\u003e\u003c!-- /Slider --\u003e\n\n```\n## 🏗️ Changelog\n\n#### v1.0.2\n\n* Se estandariza funcionalidad de las **flechas** entre Slider y Carouseles\n* Se **optimiza la carga** de la funcionalidad de Orcaslide cuando es inocada\n\n## 🌎 Team\n\n\u003ccenter\u003e\n\n| | | |\n|:------------:|:------------:|:------------:|\n|[\u003cimg src=\"https://avatars1.githubusercontent.com/u/3249830?s=460\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJorge (Konami12)\u003c/b\u003e\u003c/sub\u003e](https://github.com/konami12)\u003cbr /\u003e             |[\u003cimg src=\"https://avatars3.githubusercontent.com/u/1319384?s=460\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShannonbit (Shannonbit)\u003c/b\u003e\u003c/sub\u003e](https://github.com/shannonbit)\u003cbr /\u003e               |[\u003cimg src=\"https://avatars3.githubusercontent.com/u/946126?s=460\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlan Mena (Kolibri)\u003c/b\u003e\u003c/sub\u003e](https://github.com/the-kolibri)\u003cbr /\u003e             |\n| | | | |\n\n\u003c/center\u003e\n\n\n[![Readme Version](https://img.shields.io/badge/Readme-v0.0.2-green.svg)](https://github.com/the-kolibri)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forcaslide%2Forcaslide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forcaslide%2Forcaslide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forcaslide%2Forcaslide/lists"}