استفاده از ngx-owl-carousel-o در پروژه انگولار

برای استفاده بعد از ایجا پروژه انگولار خود فرمان زیر را در trminal  مربوط به vscode  وارد نمایید.

npm i ngx-owl-carousel-o

در فایل angular.json   این خطوطو را اضافه نمایید.  با اضافه مردن این خطوط امکان استفاده از آن را در صفحات به شما میدهد:

"styles": [
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
    "src/styles.sass" or "src/styles.css"
  ],

و یا میتوانیددر فایل src/styles.sass یا src/styles.scssاین خطوط را اضفه نمایید: 

@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

دقت نمایید که یکی از دو عمل بالا را انجام دهید.

RoutingModule و Routes را به AppModule خود اضافه نمایید.

BrowserAnimationsModule را نیر به appModule  پروژه اضافه نمایید

CarouselModule را به Module  اضافه  نمایید

import { CarouselModule } from 'ngx-owl-carousel-o';
@NgModule({
  imports: [ CarouselModule ],
  declarations: [ CarouselHolderComponent ]
})
export class SomeModule { }

و میتوانید OWl  را به پروژه کامپوننت خود اضافه نمایید

import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
  selector: '....',
  templateUrl: 'carousel-holder.component.html'
})
export class CarouselHolderComponent {
  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}

و حالا این هم کد های HTML  برای استفاده در carousel-holder.component.html

<div>Some tags before</div>
  <owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide>Slide 1</ng-template>  
    <ng-template carouselSlide>Slide 2</ng-template>  
    <ng-template carouselSlide>Slide 3</ng-template>  
  </owl-carousel-o>
  <div>Some tags after</div>

و یا 

<div>Some tags before</div>
  <owl-carousel-o [options]="customOptions">
 
    <ng-container *ngFor="let slide of slidesStore">
      <ng-template carouselSlide [id]="slide.id">
        <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
      </ng-template>
    </ng-container>
 
  </owl-carousel-o>
  <div>Some tags after</div>

نکته : هر اسلاید یک ID  دارد

نکته: Id  از نوع  string  خواهد بود

نکته : اگر بخواهید از animateOut  و animateIn  استفاده نمایید لازم است پکیج animate.css  را نصب کنید