title: How can i add animation (like fadeIn and fadeOut) in Angular (with ngx-owl-carousel-o)?
body: <p>i have try this but it seem doesn't work. </p>
  
  <pre><code>customOptions: OwlOptions = {
      loop: true,
      mouseDrag: true,
      touchDrag: true,
      pullDrag: false,
      dots: false,
      autoplay: true,
      animateIn: 'fadeIn',
      animateOut: 'fadeOut',
      autoplaySpeed: 800,
      autoplayTimeout: 5000,
      navSpeed: 700,
      navText: ['&gt;', '&lt;'],
      nav: false
    };
  </code></pre>
  
  <p>and html </p>
  
  <pre><code>&lt;owl-carousel-o [options]="customOptions" #owlCar   (translated)="getPassedData($event)"&gt;
    &lt;ng-container *ngFor="let slide of sliderData.data"&gt;
      &lt;ng-template
        carouselSlide
        [id]="slide._id"
      &gt;
        &lt;!-- &lt;img [ngClass]="{'slider-img': true}" [src]="slide.image" [alt]="slide.title"&gt; --&gt;
        &lt;div
          [ngStyle]="{'background-image': 'url(' + slide.image + ')', 'background-size': 'auto'}" [ngClass]="{slider_img: isFavorite}"
  
          fxFlex fxLayout="column" fxLayoutGap="10px" fxLayoutAlign="center"
        &gt;
          &lt;div [ngClass]="{ slider_text: isFavorite }"&gt;
            &lt;h3&gt;Just test&lt;/h3&gt;
            &lt;p&gt;Just Test&lt;/p&gt;
          &lt;a href="#" mat-raised-button&gt;&lt;span&gt;Explore Now&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/ng-container&gt;
  &lt;/owl-carousel-o&gt;
  </code></pre>
  
  <p>angular.json</p>
  
  <p>"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",
                "node_modules/animate.css/animate.min.css",
                "src/styles.scss"
              ],
  can someone help me?</p>