ngx-bootstrap carousal 的响应式变化

Question

我正在学习角度并面临问题，同时使网站在 ngx-bootstrap carousal 中响应。是否可以在 ngx-bootstrap carousal 中进行响应式更改？

在主视图中，我每个视图显示 3 张图像，而我想在移动视图中仅显示 1 张图像。在这里我分享我的代码。

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>

testimonials.component.ts 文件中的代码

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

经过一段时间的研究后，我想出了一个我认为适合您的解决方案。您需要考虑的是它不会监听屏幕宽度的变化。这意味着， 的值itemsPerSlide是在方法上设置的ngInit，并且不会再次更新（因为您的问题不需要）。当您使用低于 480 像素的设备加载页面时，它会在滑块上显示一张图像，如果更大，则会显示 3 张图像。您可以更改断点来更改私有属性上的值mobileBreakpoint。让我们看看您的示例是什么样子：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;保存当前视口宽度。itemsPerSlide用于决定将使用哪个数量。private mobileBreakpoint = 480;保留断点，此时我们将使用 3 或 1 张幻灯片。private adjustsItemsPerSlide：此方法将读取当前视口宽度并在 上应用不同的值this.itemsPerSlide。PS：如果您使用通用，这将不起作用，您将需要注入 windowsService 而不是直接在组件中使用 windows 对象（这是本机浏览器 windows 对象，而不是角度服务）。希望这可以帮助 ：）