Карусель ng-bootstrap не выглядит правильно в полном окне, но выглядит хорошо на минимуме - PullRequest
Новая
       37

Карусель ng-bootstrap не выглядит правильно в полном окне, но выглядит хорошо на минимуме

0 голосов
/ 10 апреля 2019

Я изучаю ng-bootstrap и действительно изучал возможность их использования в карусели. Я пошел к их официальному документу и к примеру, они работают на половину окна, но не выглядят хорошо в полном окне. Как сделать так, чтобы карусель выглядела хорошо в полном окне?

Я попытался присвоить ngb-carousel идентификатор и изменить его отображение на встроенный, но это не сработало.

ссылка (указана ниже) приведет вас к официальному документу, и если вы нажмете на StackBlitz вверху, вы сможете запустить код. (извините, я попытался предоставить ссылку на пример stackBlitz здесь, но он продолжал перенаправлять на домашнюю страницу).

ссылка на официальный документ (я использую код первого примера !!!!): https://ng -bootstrap.github.io / # / компоненты / карусельного / примеры

Вот скопированный код: 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 * +1022 * 
<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>

carouselbasic.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}`;
    });
  }
}

Опять же, он (карусель) выглядит хорошо на половине экрана, но на полном экране выглядит полностью выключенным (как будто вы не видите стрелку вправо на карусели). Это отзывчиво, но я не знаю, что я могу сделать, чтобы он выглядел каруселью на весь экран.

В конечном счете, я пытаюсь добавить это на свой собственный веб-сайт, и когда я пытаюсь добавить его сейчас, правая сторона карусели выглядит совершенно невидимой (я не вижу карусели справа). Я уверен, что если я смогу решить проблему с полноэкранным режимом с помощью карусели, она будет работать на моей странице.

EDIT : ----------------------------------- Мне не удалось справиться с этим дополнительным полем, но я попытался центрировать ng-карусель, и это сделало так, чтобы левый и правый значки отображались вместе.

1 Ответ

0 голосов
/ 11 апреля 2019

2 CSS изменений для удовлетворения ваших требований: 

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

первый гарантирует, что ширина равна 100% независимо от размера изображения ... для заполнения, мы просто перезаписываем отступы, которые были там из-за container-fluid класса

завершено рабочая демонстрация здесь

...