1.0.11 • Published 7 years ago
tcc-ng-owl-carousel v1.0.11
TccNgOwlCarousel
This project is develop for Angular 4.
Install
npm install tcc-ng-owl-carousel
Import library
If you use Angular Cli, edit .angular-cli.json
{
"apps": [
{
//...
"styles": [
//...
"../node_modules/owl.carousel/dist/assets/owl.carousel.min.css"
],
"scripts": [
//...
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.min.js"
]
}
]
}
Without Angular CLI
, edit index.html
<!--index.html-->
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
Usage
You can find the options of OwlCarouse2 here
//app.component.ts
export class AppComponent {
configs = {
items: 2,
nav: true
};
}
//app.module.ts
//...
import { TccOwlCarouselDirective } from 'tcc-ng-owl-carousel';
@NgModule({
declarations: [
TccOwlCarouselDirective,
//...
],
//...
})
export class AppModule { }
<!--app.component.html-->
<div tccOwlCarousel [configs]="configs">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
</div>
1.0.11
7 years ago
1.0.10
7 years ago
1.0.8
7 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago
0.0.0
7 years ago