Responsive changes in ngx-bootstrap carousal

Question

i am learning angular and facing issue while making site responsive in ngx-bootstrap carousal. Is it possible to do responsive changes in ngx-bootstrap carousal?

On main view I am showing 3 images per view and I want to show just 1 image in mobile view. Here I am sharing my code.

Code in testimonials.component.html

<carousel [itemsPerSlide]="itemsPerSlide" [singleSlideOffset]="singleSlideOffset" [interval]="false" [noWrap]="noWrap">
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
</carousel>

Code in testimonials.component.ts file

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent implements OnInit {
    itemsPerSlide = 3;
    singleSlideOffset = false;
    noWrap = false;
    slidesChangeMessage = '';
    constructor() { }

    ngOnInit(): void {
    }
}

Answer 1

After investigating this for a while, I came up with a solution that I believe would suit you.

What you need to take into consideration is that it doesn't listen for changes on the screen width.

This means, the value of itemsPerSlide is set on ngInit method and never updated again (as it wasn't required on your question). When you load the page with a device under 480px, it shows one image on the slider, if it's bigger, it shows 3.

You can change the breakpoint changing the value on the private property mobileBreakpoint.

Let's have a look at how your example will look like:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent implements OnInit {
    itemsPerSlide = 3;
    singleSlideOffset = false;
    noWrap = false;
    slidesChangeMessage = '';

    private innerWidth: number;
    private mobileBreakpoint = 480;

    constructor() { }

    ngOnInit(): void {
      this.adjustsItemsPerSlide();
    }

  private adjustsItemsPerSlide() {
    this.innerWidth = window.innerWidth;
    if (this.innerWidth < this.mobileBreakpoint) {
      this.itemsPerSlide = 1;
    } else {
      this.itemsPerSlide = 3;
    }
  }
}

• private innerWidth: number; holds the current viewport width. Use to decide which number of itemsPerSlide will be used.
• private mobileBreakpoint = 480; holds the breakpoint, at which point we will be using 3 or 1 slide.
• private adjustsItemsPerSlide: this method will read the current viewport width and apply different values on this.itemsPerSlide.

I also create an example on stackblitz that shows the desired effect.

PS: if you are using universal, this won't work, and you will need to inject a windowsService instead of using the windows object (which is native browser windows object, not angular service) straight in the component.

Hope this helps :)