Question

我的一个组件中有一个旋转木马。我已经正确导入了bootstrap（使用bootstrap按钮测试）。活动图像与滑块图标和底部的导航图标一起出现。

图像不会滑动，单击滑块图标或导航按钮会跳到页面底部。

这是代码。

<div class="col-sm-4" style="text-align: center">
    <script>
        $('.carousel').carousel({
            interval: 4000
        });
    </script>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="assets/img/icons/asu.jpg" alt="Los Angeles" style="width:100%;">
            </div>

            <div class="item">
                <img src="assets/img/icons/rm.jpg" alt="Chicago" style="width:100%;">
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

知道我哪里出错了吗？

Answer 1

你可以看看@ this plunker使用原生的Angular方法制作旋转木马，最好的是你可以根据自己的喜好进行调整

实现轮播（角度4）

1 个答案: