首頁猿問 ngx-bootstrap...

ngx-bootstrap carousal 的響應式變化

Html5

慕工程0101907 2023-09-18 15:55:03

我正在學習角度并面臨問題，同時使網站在 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 { }}

查看完整描述

1 回答

米脂

TA貢獻1836條經驗獲得超3個贊

經過一段時間的研究后，我想出了一個我認為適合您的解決方案。

您需要考慮的是它不會監聽屏幕寬度的變化。

這意味著，的值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 對象，而不是角度服務）。

希望這可以幫助：）

反對回復 2023-09-18

1 回答
0 關注
89 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

ngx-bootstrap carousal 的響應式變化

ngx-bootstrap carousal 的響應式變化

1 回答

添加回答