Javascript Angular js中的图像滑块未按预期工作

我是新手。我一直遵循这个链接中的一个示例来实现图像滑块，但它并没有按预期工作

#幻灯片\u控件>div{
高度：200px；
}
img{
保证金：自动；
宽度：400px；
}
#滑动控制{
位置：绝对位置；
宽度：400px；
左：50%；
顶部：20px；
左边距：-200px；
}
幻灯片{{$index+1}
angular.module（'app'，['ui.bootstrap']）；
功能旋转木马（$scope）{
$scope.myInterval=3000；
$scope.slides=[
{
图像：'http://lorempixel.com/400/200/'
},
{
图像：'http://lorempixel.com/400/200/food'
},
{
图像：'http://lorempixel.com/400/200/sports'
},
{
图像：'http://lorempixel.com/400/200/people'
}
];
}

图像显示在列表中，而不是幻灯片中

---

您缺少引导CSS

在HTML的顶部添加以下样式引用，滑块就可以工作了

---

在小提琴中看到它：

谢谢，我可以用一个示例项目来解决这个问题，但是当我尝试在laravel中这样做时，它仍然不起作用，在laravel框架中是否需要做一些不同的事情？@incr3diblenoob这与laravel没有任何关系。无论在拉拉维尔发生了什么，这都应该可以正常工作。仅确保从服务器正确加载页面。就这样。

<style>
    #slides_control > div{
        height: 200px;
    }
    img{
        margin:auto;
        width: 400px;
    }
    #slides_control {
        position:absolute;
        width: 400px;
        left:50%;
        top:20px;
        margin-left:-200px;
    }
</style>
<div ng-app="app">
    <div ng-controller="CarouselDemoCtrl" id="slides_control">
        <div>
            <carousel interval="myInterval">
                <slide ng-repeat="slide in slides" active="slide.active">
                    <img ng-src="{{slide.image}}">
                    <div class="carousel-caption">
                        <h4>Slide {{$index+1}}</h4>
                    </div>
                </slide>
            </carousel>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script>
    angular.module('app', ['ui.bootstrap']);
    function CarouselDemoCtrl($scope){
        $scope.myInterval = 3000;
        $scope.slides = [
            {
                image: 'http://lorempixel.com/400/200/'
            },
            {
                image: 'http://lorempixel.com/400/200/food'
            },
            {
                image: 'http://lorempixel.com/400/200/sports'
            },
            {
                image: 'http://lorempixel.com/400/200/people'
            }
        ];
    }
</script>