Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/criar-art/slidecontent-angular
A project with components for create a slide with content in your application angular
https://github.com/criar-art/slidecontent-angular
angular hacktoberfest
Last synced: about 2 months ago
JSON representation
A project with components for create a slide with content in your application angular
- Host: GitHub
- URL: https://github.com/criar-art/slidecontent-angular
- Owner: criar-art
- License: mit
- Created: 2023-04-29T21:55:29.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-14T03:42:49.000Z (2 months ago)
- Last Synced: 2024-11-14T04:28:03.310Z (2 months ago)
- Topics: angular, hacktoberfest
- Language: TypeScript
- Homepage: https://slidecontent-angularjs.web.app
- Size: 3.6 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - slidecontent-angular (⭐1) - A simple content slide developed in Angular with navigation buttons and transition animations. (Recently Updated / [Aug 31, 2024](/content/2024/08/31/README.md))
- awesome-angular - slidecontent-angular - A simple content slide developed in Angular with navigation buttons and transition animations. (Table of contents / Third Party Components)
- fucking-awesome-angular - slidecontent-angular - A simple content slide developed in Angular with navigation buttons and transition animations. (Table of contents / Third Party Components)
- fucking-awesome-angular - slidecontent-angular - A simple content slide developed in Angular with navigation buttons and transition animations. (Table of contents / Third Party Components)
README
# SlideContentAngular
## Installation
To install the `slidecontent-angular` library via npm, run the following command in your Angular project:
```bash
npm install slidecontent-angular
```
After installation, you'll need to import the `SlideContentAngular` into your Angular module to start using the components provided by the library.
## Usage
1. **Importing `SlideContentAngular`:**
In your `AppModule` or the specific module where you want to use the `SlideContent` component, import the `SlideContentAngular` as follows:
```typescript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { SlideContentAngular } from "slidecontent-angular";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
SlideContentAngular, // Import the SlideContentAngular here
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
2. **Using `SlideContent` and `SlideItem` Components:**
Once the module is imported, you can use the `slide-content` and `slide-item` components in your templates. Below is an example:
```html
```
### Explanation:
- **``**: 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.
- **``**: 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.
### :performing_arts: Com quem você pode conversar sobre o projeto?
#### Who can you talk to about the project?
#### ¿Con quién puedes hablar sobre el proyecto?
#### С кем вы можете поговорить о проекте?
#### 誰がプロジェクトについて話すことができますか？
#### À qui pouvez-vous parler du projet?
#### Proje ile ilgili kiminle konuşabilirsin ?
#### 你能谈谈这个项目吗？
* :ghost: @lucasferreiralimax
* :email: [email protected]