ngx-bootstrapを使った角型カルーセル

Question

私はGetting started guide using angular-cliに従っており、Alertモジュールを使って完全なデモを行った。私は、hereのようにカルーセルを追加しようとしました。

私はコンソールにエラーがありませんが、ディスプレイは有線のように見え、カルーセルは機能していません。これは私がコピー＆ペースト成分のコードだけでなく、持っている...それは

矢印は動作しますが、キャプションは、画像の外側で画像の右側に白のブロックを行くどのように見えるか

ですhtmlと、上記のリンクの最初の2つの例を確認してみました。

誰かがこの問題を理解するのを手助けできますか？

class="img-responsive center-block" 

を...まだそれはそれがまともに見えるようにするためにそれらをロードする前に、同じ大きさのすべてのイメージを持っているのに役立ちます：

Answer 1

あなたのイメージ（imgタグ）にこれを追加します。

ブートストラップカルーセルは画像のサイズを自動的に変更しません&指定された領域を拡大します。あなたがその効果をしたい場合は、より良い別のカルーセルコンポーネントを使用（ないngx-bootstrap 1）

Answer 2

は、これは私がこの問題を解決する方法、（@ Bogacの答えのベース）

<div class="container"> 
    <div class="col-md-8 col-xs-12 col-md-offset-2 push-md-2"> 
    <carousel> 
     <slide *ngFor="let slide of slides; let index=index"> 
     <img [src]="slide.image" class="img-responsive center-block"> 
     <div class="carousel-caption"> 
      <h4>Slide {{index}}</h4> 
      <p>{{slide.text}}</p> 
     </div> 
     </slide> 
    </carousel> 
    </div> 
</div> 

Answer 3

あなたが依存関係を持っていたために持っていることを忘れないでくださいですインストールされます。

npm install ngx-bootstrap bootstrap@4.0.0-beta jquery popper.js --save 

例

HTML：

<div class="container"> 
     <div class="col-xs-12"> 
      <carousel> 
       <slide> 
        <img src="../../../assets/img/img1.jpg" class="img-responsive center-block"> 
        <div class="carousel-caption"> 
         <h4>Test</h4> 
         <p>test</p> 
        </div> 
       </slide> 
       <slide> 
        <img src="../../../assets/img/img2.jpg" class="img-responsive center-block"> 
        <div class="carousel-caption"> 
         <h4>Test2</h4> 
         <p>test2</p> 
        </div> 
       </slide> 
      </carousel> 
     </div> 
    </div> 

app.module.ts：

import { AlertModule } from '../../node_modules/ngx-bootstrap'; 
import { CarouselModule } from '../../node_modules/ngx-bootstrap/carousel'; 

imports: [..., 
AlertModule.forRoot(), 
CarouselModule.forRoot(), 
.], 

.angular-cli.json：

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