Question

我有一个要求，即我需要一个多项目轮播，每个幻灯片有3个项目，在那里我还使用了自举程序3.3.7和角度6+创建了轮播，这里的问题是在给{{1之后， }}

下面是我的代码

的直观表示

ng build --prod

.scss代码

<div class="container">
    <div class="row">
        <div class="col-xs-12" id="datacase">
            <h2 class="h">Test Data</h2>


            <div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">

                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-lg-4">


                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=A" alt="Card image cap">
                                    <h5>A CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> A Content

                                    </p>


                                </div>

                            </div>
                            <div class="col-lg-4">

                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=B" alt="Card image cap">
                                    <h5>B CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> B Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=C" alt="Card image cap">
                                    <h5>C CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> C Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=D" alt="Card image cap">
                                    <h5>D CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> D Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=E" alt="Card image cap">
                                    <h5>E CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> E Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=F" alt="Card image cap">
                                    <h5>F CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs">F Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=G" alt="Card image cap">
                                    <h5>g CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> g Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=H" alt="Card image cap">
                                    <h5>H CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> H Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=I" alt="Card image cap">
                                    <h5>I CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs">I Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <a href="#imageCarousel" class="carousel-control left" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#imageCarousel" class="carousel-control right" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>





            </div>

        </div>

下面是我的堆栈闪电网址

https://stackblitz.com/edit/angular-f2hx6b

注意：由于stackblitz不能正确支持jquery的angular，所以只有代码可供参考，请检查视频

如何使用angular 6和bootstrap 3.3.7创建具有3个项目的多项目轮播

0 个答案: