时间戳

首页 > 解决方案 > ng-bootstrap 的 Carousel 在全窗口中看起来不正确，但至少看起来不错

css - ng-bootstrap 的 Carousel 在全窗口中看起来不正确，但至少看起来不错

问题描述

我正在学习 ng-bootstrap 并且真的在研究使用他们的轮播实现。我去了他们的官方文档和他们在半窗口中工作但在全窗口中看起来不太好的示例。如何使旋转木马在全窗口中看起来不错？

我尝试分配ngb-carousel一个 id 并将其显示更改为内联，但它不起作用。

链接（如下所列）将您带到官方文档，如果您单击顶部的 StackBlitz，您可以运行代码。（抱歉，我试图在此处提供指向 stackBlitz 示例的链接，但它一直重定向到主页）。

链接到官方文档（我是第一个示例的代码！！！！）： https ://ng-bootstrap.github.io/#/components/carousel/examples

这是复制的代码：app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdCarouselBasic } from './carousel-basic';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdCarouselBasic],
  exports: [NgbdCarouselBasic],
  bootstrap: [NgbdCarouselBasic]
})
export class NgbdCarouselBasicModule {}

app.component.html

<div class="container-fluid">

  <hr>

  <p>
    This is a demo example forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
    Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
  </p>

  <hr>

  <ngbd-carousel-basic></ngbd-carousel-basic>
</div>

轮播-basic.html

<ngb-carousel *ngIf="images">
  <ng-template ngbSlide>
    <img [src]="images[0]" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img [src]="images[1]" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img [src]="images[2]" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

轮播基础.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {map} from 'rxjs/operators';

@Component({selector: 'ngbd-carousel-basic', templateUrl: './carousel-basic.html'})
export class NgbdCarouselBasic implements OnInit {
  images: Array<string>;

  constructor(private _http: HttpClient) {}

  ngOnInit() {
    this._http.get('https://picsum.photos/list')
        .pipe(map((images: Array<{id: number}>) => this._randomImageUrls(images)))
        .subscribe(images => this.images = images);
  }

  private _randomImageUrls(images: Array<{id: number}>): Array<string> {
    return [1, 2, 3].map(() => {
      const randomId = images[Math.floor(Math.random() * images.length)].id;
      return `https://picsum.photos/900/500?image=${randomId}`;
    });
  }
}

再次，它（轮播）在半屏时看起来不错，但在全屏时看起来完全关闭（就像你在轮播中看不到右箭头一样）。它反应灵敏，但我知道我能做些什么让它在全屏时看起来像旋转木马。

最后，我正在尝试将其添加到我自己的网站中，当我现在尝试添加它时，轮播的右侧看起来完全关闭（在右侧看不到轮播）。我确定如果我可以使用轮播解决全屏问题，那么它将在我的页面上运行。

编辑:------------------------------------------------ 我无法解决这个额外的保证金，但我试图将 ng-carousel 居中并使其左右图标确实一起出现。

标签： cssangularcarouselangular7ng-bootstrap

解决方案

2 CSS 更改以满足您的要求：

.carouselImage { width:100%;  }
::ng-deep .container-fluid { padding:0 !important; }

第一个确保无论图像大小如何，宽度都是 100%……对于填充，我们只是覆盖了由于container-fluid类而存在的填充

在这里完成工作演示

推荐阅读