From 0b45aa736e8ff45e66696fa2a8a0006fc1562a2b Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Sat, 5 Oct 2024 01:32:33 -0300
Subject: [PATCH] update readme

---
 projects/slidecontent-angular/README.md | 96 +++++++++++++++++++++----
 1 file changed, 84 insertions(+), 12 deletions(-)

diff --git a/projects/slidecontent-angular/README.md b/projects/slidecontent-angular/README.md
index 8cdd15b..ac32de1 100644
--- a/projects/slidecontent-angular/README.md
+++ b/projects/slidecontent-angular/README.md
@@ -1,24 +1,96 @@
 # SlidecontentAngular
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
+## Installation
 
-## Code scaffolding
+To install the `slidecontent-angular` library via npm, run the following command in your Angular project:
 
-Run `ng generate component component-name --project slidecontent-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project slidecontent-angular`.
-> Note: Don't forget to add `--project slidecontent-angular` or else it will be added to the default project in your `angular.json` file. 
+```bash
+npm install slidecontent-angular
+```
 
-## Build
+After installation, you'll need to import the `SlideContentModule` into your Angular module to start using the components provided by the library.
 
-Run `ng build slidecontent-angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Usage
 
-## Publishing
+1. **Importing `SlideContentModule`:**
+   In your `AppModule` or the specific module where you want to use the `SlideContent` component, import the `SlideContentModule` as follows:
 
-After building your library with `ng build slidecontent-angular`, go to the dist folder `cd dist/slidecontent-angular` and run `npm publish`.
+   ```typescript
+   import { NgModule } from '@angular/core';
+   import { BrowserModule } from '@angular/platform-browser';
+   import { SlideContentModule } from 'slidecontent-angular';
+   import { AppComponent } from './app.component';
 
-## Running unit tests
+   @NgModule({
+     declarations: [
+       AppComponent
+     ],
+     imports: [
+       BrowserModule,
+       SlideContentModule // Import the SlideContentModule here
+     ],
+     providers: [],
+     bootstrap: [AppComponent]
+   })
+   export class AppModule { }
+   ```
 
-Run `ng test slidecontent-angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+2. **Using `SlideContent` and `SlideItem` Components:**
 
-## Further help
+   Once the module is imported, you can use the `app-slide-content` and `app-slide-item` components in your templates. Below is an example:
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+   ```html
+   <app-slide-content
+     name="Example 1"
+     type="infinite"
+     [nav]="true"
+     [animation]="{ disabled: true }"
+   >
+     <app-slide-item
+       class="favela"
+       [actived]="true"
+       i18n-title="@@god_faith"
+       title="Faith in God"
+       img="assets/faveladascriancas.jpg"
+       url="https://github.com/criar-art/slidecontent-angular"
+       target="_blank"
+     ></app-slide-item>
+     
+     <app-slide-item
+       i18n-title="@@city"
+       title="Ermelino Matarazzo"
+       img="assets/ermelino.jpg"
+       url="https://github.com/criar-art/slidecontent-angular"
+       target="_blank"
+     ></app-slide-item>
+     
+     <app-slide-item
+       [titleHidden]="true"
+       title="Modern Office"
+       img="assets/new-york.jpg"
+     ></app-slide-item>
+     
+     <app-slide-item
+       [titleHidden]="true"
+       title="Moto Life"
+       img="assets/motorcycle.jpg"
+     ></app-slide-item>
+   </app-slide-content>
+   ```
+
+### Explanation:
+
+- **`<app-slide-content>`**: The parent component that holds multiple slide items. The attributes include:
+  - `name`: A name to identify the slide content.
+  - `type`: The type of slide (e.g., "infinite" for continuous scrolling).
+  - `nav`: A boolean that determines whether navigation buttons are displayed.
+  - `animation`: Controls the animation settings. In this case, animations are disabled.
+
+- **`<app-slide-item>`**: Represents individual items in the slide content. Each item can have attributes such as:
+  - `title`: The title of the slide.
+  - `img`: The path to the image that will be displayed.
+  - `url`: A link the user can visit when clicking on the slide.
+  - `target`: Specifies how to open the link (e.g., `_blank` to open in a new tab).
+  - `actived`: Marks the slide as active.
+  - `titleHidden`: Hides the title if set to `true`.
+  - `i18n-title`: Provides internationalization support for the title.