Question

我是Angular js的新手。我一直在关注此链接中的示例以实现图像滑块，但它无法按预期工作。

<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>

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

Answer 1

你缺少bootstrap CSS。

在HTML的顶部添加以下样式引用，滑块将起作用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

在小提琴中看到它：https://jsfiddle.net/hmb2mjgz/

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

1 个答案: