首頁猿問 ngx-bootstrap...

ngx-bootstrap carousal 的響應(yīng)式變化

Html5

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

我正在學(xué)習(xí)角度并面臨問題，同時(shí)使網(wǎng)站在 ngx-bootstrap carousal 中響應(yīng)。是否可以在 ngx-bootstrap carousal 中進(jìn)行響應(yīng)式更改？在主視圖中，我每個(gè)視圖顯示 3 張圖像，而我想在移動(dòng)視圖中僅顯示 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貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊

經(jīng)過一段時(shí)間的研究后，我想出了一個(gè)我認(rèn)為適合您的解決方案。

您需要考慮的是它不會(huì)監(jiān)聽屏幕寬度的變化。

這意味著，的值itemsPerSlide是在方法上設(shè)置的ngInit，并且不會(huì)再次更新（因?yàn)槟膯栴}不需要）。當(dāng)您使用低于 480 像素的設(shè)備加載頁面時(shí)，它會(huì)在滑塊上顯示一張圖像，如果更大，則會(huì)顯示 3 張圖像。

您可以更改斷點(diǎn)來更改私有屬性上的值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;保存當(dāng)前視口寬度。itemsPerSlide用于決定將使用哪個(gè)數(shù)量。
private mobileBreakpoint = 480;保留斷點(diǎn)，此時(shí)我們將使用 3 或 1 張幻燈片。
private adjustsItemsPerSlide：此方法將讀取當(dāng)前視口寬度并在上應(yīng)用不同的值this.itemsPerSlide。

PS：如果您使用通用，這將不起作用，您將需要注入 windowsService 而不是直接在組件中使用 windows 對(duì)象（這是本機(jī)瀏覽器 windows 對(duì)象，而不是角度服務(wù)）。

希望這可以幫助：）

反對(duì) 回復(fù) 2023-09-18