2016-10-20 1 views
2

Я пытаюсь использовать компонент с карусели внутри.Карусельные изображения не складываются

<ngb-carousel> 
    <template ngbSlide> 
    <img src="img1" 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> 
    </template> 
    <template ngbSlide> 
    <img src="img2" alt="Random second slide"> 
    <div class="carousel-caption"> 
     <h3>Second slide label</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    </template> 
    <template ngbSlide> 
    <img src="img3" alt="Random third slide"> 
    <div class="carousel-caption"> 
     <h3>Third slide label</h3> 
     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> 
    </div> 
    </template> 
</ngb-carousel> 

Это мой компонент:

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

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
@Component({ 
    selector: 'img-carousel', 
    templateUrl: './img-carousel.component.html', 
    styleUrls: ['./img-carousel.component.scss'] 
}) 
export class ImgCarouselComponent { 
} 

И это module.ts:

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

import { BookingComponent } from './booking.component'; 
import { ImgCarouselComponent } from './img-carousel/img-carousel.component'; 

@NgModule({ 
    imports: [NgbModule.forRoot()], 
    exports: [BookingComponent], 
    declarations: [BookingComponent, ImgCarouselComponent], 
    providers: [], 
}) 

export class BookingModule { } 

Проблема заключается в том, что изображения не укладываются. Нужно ли мне импортировать что-то еще, или мне не хватает чего-то существенного?

Угловая Версия: 2.0.2 нг-самозагрузки: @latest

Я использую радиально-кли без system.js.

+1

Я нашел проблему. Я использовал bootstrap 3 для остальной части моего приложения, но для этого требуется bootstrap 4. Надеюсь, это поможет, так как это не ошибка, и она терпит неудачу. –

ответ

4

Это не может работать с Bootstrap 3. Проблема исчезает при переходе на версию 4.0.

0

У меня тоже была эта проблема, и причина была в том, что я пытаюсь потянуть CSS за неправильный путь. Когда я просто использовал CDN, все работало, как ожидалось.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

1

У меня был такой же вопрос и добавил cdn и он работал отлично. Если вы не хотите ссылаться на cdn, добавьте bootstrap в styles in .angular-cli.json`.

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
    ]