Slides in Bootstrap Carousel are not coming in horizontal form, slides are coming vertically only

问题

Current behavior Slides in Bootstrap Carousel are not coming, slides are coming vertically only. in carousel we expect slides to come horizontally only, I have attached the current behavior screenshots also.

Expected behavior Slides in carousel should come horizontally like this example screenshot below (example link https://ng-bootstrap.github.io/#/components/carousel/examples)

Minimal reproduction of the problem with instructions after downloading code from github link https://github.com/gg-gg-v1/v1_ComponentsWithSEO run npm install run ng serve --o will launch in browser

Example repository https://github.com/gg-gg-v1/v1_ComponentsWithSEO

Environment Angular CLI: 6.2.1 Node: 8.11.3 OS: win32 x64 Angular: 6.1.7 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, platform-server, router

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

  <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>

回答1:

You've not imported bootstrap.css. Import that in angular.json styles array or in index.html directly give cdn reference to it:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

回答2:

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

this was also documented at https://github.com/ng-bootstrap/ng-bootstrap/issues/2141

来源：https://stackoverflow.com/questions/52307403/slides-in-bootstrap-carousel-are-not-coming-in-horizontal-form-slides-are-comin

标签

angular

carousel