CODEWITHSUNDEEP
angularcarouselng-bootstrap
Amaan Kulshreshtha
Amaan Kulshreshtha

Reputation: 560

image thumbnails of carousel in ng-bootstrap

I have a carousel in angular 4 and I am using ng-bootstrap. I want to make change the indicators and make them thumbnail images like this

Here is my current ngb code

<div class="row">
    <div class="col-md-12">
        <ngb-carousel>
            <ng-template ngbSlide>
                <img class="img-fluid" src="https://lorempixel.com/900/500 r=1" alt="Random first slide">
                <div class="carousel-caption">
                    <h3>First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </ng-template>
            <ng-template ngbSlide>
                <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
                <div class="carousel-caption">
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </ng-template>
            <ng-template ngbSlide>
                <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
                <div class="carousel-caption">
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </ng-template>
        </ngb-carousel>
    </div>
</div>

Upvotes: 3

Views: 3825

Answers (1)

Shaiful Aiman Malik
Shaiful Aiman Malik

Reputation: 71

Old Answer

I came across your question when searching for similar feature. Unfortunately, we are not able to customize the carousel-indicator as the time of this post. You can look at the the issue opened here.

If we dive into the source code, there is no dynamic templating in the li here in this line.

New Answer

I've come up with workaround for this. Upon inspection on the ng-bootstrap source code and api documentation, you can see that ngb-carousel accept activeId input. So, we can create a method that will pass the clicked photo thumbnail to the ngb-carousel.

The most important part is:

  1. Put the input properties [activeId] inside ngb-carousel

    <ngb-carousel class="myCarousel" [activeId]="activeSliderId"></ngb-carousel>

  2. Create a click event when clicking the thumbnail

    <li class="thumbnail" (click)="cycleToSlide(photo)"></li>

  3. Method to call upon clicking the thumbnail

     cycleToSlide(photo) {
   this.activeSliderId = "ngb-slide-" + photo.id;
 }

You can see the example below.

export class PhotosComponent {
  activeSliderId;

  cycleToSlide(photo) {
    console.log(photo.id - 1);
    let slideId = photo.id - 1;

    this.activeSliderId = "ngb-slide-" + slideId;
  }

}
.carousel-thumbnail {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-thumbnail__item {
  cursor: pointer;
}

.carousel-thumbnail__img {
  width: 80px;
  height: 60px;
}
<ngb-carousel class="myCarousel" [activeId]="activeSliderId">
  <ng-template ngbSlide *ngFor="let photo of photos">
    <img class="slide__image" [src]="photo.src" alt="Random {{photo.name}} slide">
  </ng-template>
</ngb-carousel>

<ul class="carousel-thumbnail">
  <li class="carousel-thumbnail__item list-inline-item" *ngFor="let photo of photos" (click)="cycleToSlide(photo)">
    <a class="selected">
      <img class="carousel-thumbnail__img" [src]="photo.src">
    </a>
  </li>
</ul>

Upvotes: 5

Related Questions