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 :)