title: Customise NG Bootstrap carousel in Angular
body: <p>I have a ng-bootstrap Carousel in my Angular project and I would like to change a few things but am at a loss of how to go about it. </p>
  
  <p>First, I would like to have a fade effect when the slide changes, at the moment the next image just appears. </p>
  
  <p>Secondly, I want to have my own arrows and slide indicator or change the style! I have attempted to do that via CSS but none of my code seems to get accepted. </p>
  
  <p>Below my slideshow-component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  images = [1, 2, 3, 4, 5, 6, 7].map(() =&gt; `https://picsum.photos/900/500?random&amp;t=${Math.random()}`);
  
    paused = false;
    unpauseOnArrow = false;
    pauseOnIndicator = false;
    pauseOnHover = true;
  
    @ViewChild('carousel', {static : true}) carousel: NgbCarousel;
  
    togglePaused() {
      if (this.paused) {
        this.carousel.cycle();
      } else {
        this.carousel.pause();
      }
      this.paused = !this.paused;
    }
  
    onSlide(slideEvent: NgbSlideEvent) {
      if (this.unpauseOnArrow &amp;&amp; slideEvent.paused &amp;&amp;
        (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) {
        this.togglePaused();
      }
      if (this.pauseOnIndicator &amp;&amp; !slideEvent.paused &amp;&amp; slideEvent.source === NgbSlideEventSource.INDICATOR) {
        this.togglePaused();
      }
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>slideshow-component html </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;ngb-carousel #carousel interval="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)"&gt;
    &lt;ng-template ngbSlide *ngFor="let img of images; index as i"&gt;
        &lt;div class="picsum-img-wrapper"&gt;
          &lt;img [src]="img" alt="My image {{i + 1}} description"&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
  &lt;/ngb-carousel&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>slideshow-component css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>.picsum-img-wrapper {
   img {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    display: block;
    margin: 0;
   }
  }
  
  .carousel-indicators &gt; li {
   visibility: hidden;
      box-sizing: content-box;
      flex: 0 1 auto;
      width: 30px;
      height: 30px;
      border-radius: 20px;
      margin-right: 3px;
      margin-left: 3px;
      text-indent: -999px;
      cursor: pointer;
      background-color: #fff;
      background-clip: padding-box;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      opacity: .5;
      transition: opacity .6s ease;
  }
  
  a.carousel-control-prev,
  a.carousel-control-next {
   span {
    display: none;
   }
  }</code></pre>
  </div>
  </div>
  </p>