Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/orcaslide/orcaslide
OrcaSlide
https://github.com/orcaslide/orcaslide
freejquery javascript npm orca slider swipe tocuh yarn
Last synced: 4 days ago
JSON representation
OrcaSlide
- Host: GitHub
- URL: https://github.com/orcaslide/orcaslide
- Owner: OrcaSlide
- License: mit
- Created: 2018-04-21T03:43:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-25T01:29:07.000Z (over 1 year ago)
- Last Synced: 2024-11-11T04:13:44.857Z (4 days ago)
- Topics: freejquery, javascript, npm, orca, slider, swipe, tocuh, yarn
- Language: JavaScript
- Size: 145 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Orca Slide
[](https://github.com/konami12/orcaslide)
[](https://badge.fury.io/gh/konami12%2Forcaslide)
*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:
[](https://www.npmjs.com/)
```
npm i orcaslide
```
o
[](https://yarnpkg.com/en/)
```
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](#-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
```javascript
// 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.|
```html
Previous Arrow
Next Arrow
```
## 🏗️ 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)](https://github.com/konami12)
|[
Shannonbit (Shannonbit)](https://github.com/shannonbit)
|[
Alan Mena (Kolibri)](https://github.com/the-kolibri)
|
| | | | |
[](https://github.com/the-kolibri)