Slider

Auxiliar para agregar un slider en tu proyeto de Angular

Primerso pasos

| :exclamation: IMPORTANTE :exclamation: | |-----------------------------------------| | Esta librería requiere @angular/material y opcionalmente @angular/fire |

Si deseas usar el administrador de SLIDES con Firestore deberás instalar @angular/fire

Sigue estos pasos para empezar un proyecto Firebase - Angular

1. Ve a Firebase console y pícale en Crear proyecto o selecciona alguno que ya hayas creado.
2. Ve a la configuración y baja a la parte Fireabase SDK y pícale en la opción de Configuracion.
3. Copia las lineas de código que están entre los corchetes
4. Ve a tu proyecto de Angular y entra en el archivo src/environments/environment.ts y pega las lineas de código en una variable nueva. El código se debe ver así:

export  const  environment  =  {
   production:  false,
   firebaseConfig:  {
   	apiKey:  "AIzaS++++++++++++++++++++++++++",
   	authDomain:  "++++++++.firebaseapp.com",
   	projectId:  "++++++++",
   	storageBucket:  "+++++++++.appspot.com",
   	messagingSenderId:  "0000000000",
   	appId:  "1:000000000000:web:++++++++++++++",
   	measurementId:  "G-++++++++++"
   }
}; 

5. Corre los siguientes comandos y sigue sus respectivas instrucciones: ng add @angular/fire ng add @angular/material
6. Inicializa tu proyecto de Firebases en app.module.ts:

import { AngularFireModule } from "@angular/fire";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

7. Ahora sí, ya puedes instalar esta librería npm i -s @marxa/slider

Modo de uso

Importa el módulo a tu proyecto

import { MxSliderModule } from "@marxa/devkit";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MxSliderModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Agrega el componente de vistas de slider en donde desees que aparezcan el slider. Por ejemplo la página de inicio de tu sitio.

<div id="slider">
  <mx-slider [slidesCollection]="'sitio'"></mx-slider>
</div>

Agrega el componente de configuraciones del slider donde lo desees o necesites. Por ejemplo en algun panel de administración. Adicionalmente puedes elegir la colección donde quires que se guarde la configuración

<mx-slider-config [collection]="'sitio'"></mx-slider-config>

Agrega el componente de CRUD de slides donde lo necesites o elijas. Por ejemplo en el panel del adminsitración. Puedes cambiar también adicionalmente le tamaño del CRUD que por default el de 100vh

<mx-slider-crud [collection]="'sitio'" [height_vh]="100"  ></mx-slider-crud>

This library was generated with Angular CLI version 11.0.9.