Bootstrap Carousel中的幻灯片不是以水平形式出现，而是仅以垂直形式出现 [英] Slides in Bootstrap Carousel are not coming in horizontal form, slides are coming vertically only

问题描述

当前行为
Bootstrap Carousel中的幻灯片不会出现，幻灯片只会垂直出现。在轮播中，我们希望幻灯片只会水平放置，我还附加了当前的行为截图。

预期的行为
轮播中的幻灯片应像
下面的示例屏幕截图一样水平放置（示例链接< a href = https://ng-bootstrap.github.io/#/components/carousel/examples rel = nofollow noreferrer> https://ng-bootstrap.github.io/#/components/carousel/examples ）

使用说明将问题最小化
从github链接 https://github.com/gg-gg-v1/v1_ComponentsWithSEO
运行npm install
运行ng serve --o
将在浏览器中启动

示例存储库
https://github.com/gg-gg-v1/v1_ComponentsWithSEO

环境
Angular CLI：6.2.1
节点：8.11.3
OS：win32 x64
Angular：6.1.7
。 ..动画，通用，编译器，compiler-cli，核心，形式
... http，语言服务，平台浏览器
...平台浏览器动态，平台服务器，路由器

slider.component.ts

slider.component.ts

import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css'],
  providers: [NgbCarouselConfig]  // add NgbCarouselConfig to the component providers
})
export class SliderComponent implements OnInit {
  images = [1, 2, 3, 4].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);

  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 10000;
    config.wrap = false;
    config.keyboard = false;
    config.pauseOnHover = false;
  }
  ngOnInit() {
      }
}

slider.component.html

slider.component.html

  <ngb-carousel *ngIf="images">
      <ng-template ngbSlide>
        <img [src]="images[0]" alt="Random first slide">
        <div class="carousel-caption">
          <h3>10 seconds between slides...</h3>
          <p>This carousel uses customized default values.</p>
        </div>
      </ng-template>
      <ng-template ngbSlide>
        <img [src]="images[1]" alt="Random second slide">
        <div class="carousel-caption">
          <h3>No mouse events...</h3>
          <p>This carousel doesn't pause or resume on mouse events</p>
        </div>
      </ng-template>
      <ng-template ngbSlide>
        <img [src]="images[2]"  alt="Random third slide">
        <div class="carousel-caption">
          <h3>No keyboard...</h3>
          <p>This carousel uses customized default values.</p>
        </div>
      </ng-template>
      <ng-template ngbSlide>
        <img [src]="images[3]" alt="Random fourth slide">
        <div class="carousel-caption">
          <h3>And no wrap after last slide.</h3>
          <p>This carousel uses customized default values.</p>
        </div>
      </ng-template>
    </ngb-carousel>

推荐答案

您需要安装bootstrap：npm install bootstrap @ 4
将其链接（通过index.html），并且相同的代码将起作用

you need to install bootstrap: npm install bootstrap@4 link it in (via index.html) and the same code will work

这也记录在> https://github.com/ng-bootstrap/ng-bootstrap/issues/2141

这篇关于Bootstrap Carousel中的幻灯片不是以水平形式出现，而是仅以垂直形式出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！