Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mujtaba01/ngx-owl-carousel
An angular2 (4) wrapper for jquery owl-carousel library with dynamic carousel item change detection
https://github.com/mujtaba01/ngx-owl-carousel
angular2 jquery owl-carousel
Last synced: 3 days ago
JSON representation
An angular2 (4) wrapper for jquery owl-carousel library with dynamic carousel item change detection
- Host: GitHub
- URL: https://github.com/mujtaba01/ngx-owl-carousel
- Owner: mujtaba01
- License: mit
- Created: 2017-01-31T19:39:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-30T08:16:18.000Z (over 6 years ago)
- Last Synced: 2024-09-19T13:05:48.994Z (8 days ago)
- Topics: angular2, jquery, owl-carousel
- Language: TypeScript
- Homepage:
- Size: 54.7 KB
- Stars: 70
- Watchers: 8
- Forks: 25
- Open Issues: 35
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# ngx-owl-carousel
## Dependencies
This Library requires jquery and owl.carousel to be installed globally
For commonJs based application load jquery and owl.carousel using script loader or use link tag in html file
Install script-loader if you don't have already
```bash
npm install script-loader
```
and in vendor.ts
```js
require('script!jquery');
require('script!owl.carousel');
```
OR
inside index.html put this inside the head tag
```html
```
If using angular-cli
Add this to angular-cli.json file
```json
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.js"
]
```
## Installation
To install this library, run:
```bash
$ npm install ngx-owl-carousel --save
```
and then from your Angular `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { OwlModule } from 'ngx-owl-carousel';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
OwlModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## Import required css files
Include these two css files
1. owl.carousel.css file
This is required css files.
2. owl.theme.default file
This file is optional. However to use default navigation controls or dots buttons this file is necessary.
Inside angular-cli.json add these lines:
```json
"styles": [
"../node_modules/owl.carousel/dist/assets/owl.carousel.css",
"../node_modules/owl.carousel/dist/assets/owl.theme.default.css"
]
```
OR include these files in main scss file.
```scss
import "~owl.carousel/dist/assets/owl.carousel.css";
import "~owl.carousel/dist/assets/owl.theme.default.css";
```
OR include these files in index.html file inside head tag.
```html
```
Once your library is imported, you can use OwlCarousel component very easily in your Angular application:
```xml
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
```
Note: Please remove comments from the above example else you will get errors.
## Angular Universal Integration
This package is a wrapper for the jquery library owl.carousel. Jquery is not supported in Angular Universal currently. Therefore the carousel cannot be rendered server side. However if you are using angular universal, do not include owl.carousel ("/node_modules/owl.carousel/dist/owl.carousel.js") in server side configuration.
## APIs
1. next(options?: any[])
- To go to next slide. Animation time can be passed as options array.
E.g. this.owlElement.next([200]). (200ms animation time).
2. previous(options?: any[])
- To go to previous slide. (arguments are similar)
3. to(options?: any[])
- To go to nth slide. (arguments are similar)
4. trigger(action: string, options?: any[])
- To trigger any jquery owl carousel's action. options can be passed accordingly.
```html