I am using Angular 6 and ng-bootstrap and trying for a carousel.

carousel is working fine, but unable to show 4 images in one slider. it's showing 1 image in each slider.

This is the data ing via API response:

  games= [{"title_id":1,"title_name":"MIssion Impossible","title_img":".jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"}]},{"title_id":2,"title_name":"Matrix","title_img":".jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":3,"title_name":"Avengers","title_img":".jpeg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":4,"title_name":"Stargate SG-1","title_img":".jpg","genres":[{"id":1,"name":"Action"},{"id":5,"name":"Drama"},{"id":2,"name":"Adventure"},{"id":9,"name":"Sci Fi"}]},{"title_id":5,"title_name":"Scooby Doo","title_img":".jpg._CB321085566_.jpg","genres":[{"id":1,"name":"Action"},{"id":10,"name":"Thriller"},{"id":6,"name":"Fantasy"}]}];

here is my ponent.html code:

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide *ngFor="let image of games" style="">
        <div class="" style="">
            <div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
                <img class="" src="{{image.title_img}}" width="" >
            </div>
        </div>
    </ng-template>
</ngb-carousel>

each image per slide it's ing.

I tried with static images as below,

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide  style="">
        <div class="">
            <img src=".jpg" width="200px" class="img-responsive" style="float:left">
            <img src=".jpg"  width="200px" class="img-responsive" style="float:left">
            <img src=".jpeg"  width="200px"  class="img-responsive" style="float:left">
        </div>
    </ng-template>
    <ng-template ngbSlide  style="">
        <div class="">
            <img src=".jpg" width="200px" class="img-responsive" style="float:left">
            <img src=".jpg"  width="200px" class="img-responsive" style="float:left">
            <img src=".jpeg"  width="200px"  class="img-responsive" style="float:left">
        </div>
    </ng-template>
</ngb-carousel>

result is:

But, in mobile it's showing one below one. I need only one image to show, on click on arrow navigation next image should display

I am using Angular 6 and ng-bootstrap and trying for a carousel.

carousel is working fine, but unable to show 4 images in one slider. it's showing 1 image in each slider.

This is the data ing via API response:

  games= [{"title_id":1,"title_name":"MIssion Impossible","title_img":"https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"}]},{"title_id":2,"title_name":"Matrix","title_img":"https://www.sideshowtoy./assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":3,"title_name":"Avengers","title_img":"http://media.icbook./2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":4,"title_name":"Stargate SG-1","title_img":"https://image.tmdb/t/p/w300_and_h450_bestv2/rst5xc4f7v1KiDiQjzDiZqLtBpl.jpg","genres":[{"id":1,"name":"Action"},{"id":5,"name":"Drama"},{"id":2,"name":"Adventure"},{"id":9,"name":"Sci Fi"}]},{"title_id":5,"title_name":"Scooby Doo","title_img":"https://images-na.ssl-images-amazon./images/G/01/aplusautomation/vendorimages/1cdd3ea2-f14f-416b-9aaa-644a9a01ad8c.jpg._CB321085566_.jpg","genres":[{"id":1,"name":"Action"},{"id":10,"name":"Thriller"},{"id":6,"name":"Fantasy"}]}];

here is my ponent.html code:

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide *ngFor="let image of games" style="">
        <div class="" style="">
            <div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
                <img class="" src="{{image.title_img}}" width="" >
            </div>
        </div>
    </ng-template>
</ngb-carousel>

each image per slide it's ing.

I tried with static images as below,

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide  style="">
        <div class="">
            <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
            <img src="https://www.sideshowtoy./assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
            <img src="http://media.icbook./2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class="img-responsive" style="float:left">
        </div>
    </ng-template>
    <ng-template ngbSlide  style="">
        <div class="">
            <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
            <img src="https://www.sideshowtoy./assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
            <img src="http://media.icbook./2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class="img-responsive" style="float:left">
        </div>
    </ng-template>
</ngb-carousel>

result is:

But, in mobile it's showing one below one. I need only one image to show, on click on arrow navigation next image should display

• javascript
• css
• carousel
• angular6
• ng-bootstrap

• The first code (dynamic version) seems to be correct. In the second one (static), you put 3 images per ng-template section. So it is normal that 3 images display at a time. Maybe I misunderstood your question – XavierBrt Commented Aug 29, 2018 at 8:30
• I need like the 3 images display at a time in dynamic version in desktop view.. when I view same section in mobile, I should show only one image at a time in slider – user6250770 Commented Aug 29, 2018 at 8:31
• So you want 3 images per slide in desktop view, and 1 at a time in mobile ? – XavierBrt Commented Aug 29, 2018 at 8:34
• yes @XavierBrt ... not only 3 ... as many as images which can fit to the screen ... like 7 images at a time in desktop and one image at a time in mobile – user6250770 Commented Aug 29, 2018 at 8:35
• If I were you, I would implement 2 carrousels, one for desktop and one for mobile, and display one or the other depending of the screen size, with an *ngIf like here : stackoverflow./questions/47034573/… – XavierBrt Commented Aug 29, 2018 at 8:41

2 Answers 2

Here is one possible solution :

Separate desktop and mobile version :

Separate the desktop version with mobile version, with a ngb-carousel for each version, selected through an *ngIf. The *ngIf checks the variable mobile, defined by (see the html below) :

ngOnInit() {
  if (window.screen.width === 360) { // 768px portrait
    this.mobile = true;
  }
}

More about it in this question.

Slider

For the mobile version, use your code (I integrated it below)

For the desktop with multiple images :

Divide you array, in a multidimensional array (first dimension for slides, second dimension for images). If you have 2 slides of 3 images, your array will be a 2*3 one.

this.games = ["a", "b", "c", "d", "e"];
this.gamesFormatted = [];
var j = -1;

for (var i = 0; i < this.games.length; i++) {
    if (i % 3 == 0) {
        j++;
        this.gamesFormatted[j] = [];
        this.gamesFormatted[j].push(this.games[i]);
    }
    else {
        this.gamesFormatted[j].push(this.games[i]);
    }
}

Display the carousel with a double loop :

<div *ngIf="games">
    <!-- Mobile section : one image per slide -->
    <ngb-carousel *ngIf="mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
        <ng-template ngbSlide *ngFor="let image of games">
            <div class="" style="">
                <div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
                    <img class="" src="{{image.title_img}}">
                </div>
            </div>
        </ng-template>
    </ngb-carousel>

    <!-- Desktop section : multiple images per slide -->
    <ngb-carousel *ngIf="!mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
        <ng-template ngbSlide *ngFor="let group of gamesFormatted">
            <div class="" style="" *ngFor="let game of group">
                    <img class="" src="{{game.title_img}}">
            </div>
        </ng-template>
    </ngb-carousel>
</div>

I didn't test the html part, so there is surely improvements to do.

Have you tried it like this:

`<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
  <ng-template ngbSlide  style="">
    <div class="">
      <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
    </div>
    <div class="">
      <img src="https://www.sideshowtoy./assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
    </div>
    <div class="">
      <img src="http://media.icbook./2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class="img-responsive" style="float:left">
     </div>
  </ng-template>
</ngb-carousel>
`