AngularJS图片滑块功能异常：图片以列表形式显示而非轮播

嘿，我看到你作为AngularJS新手，照着示例做图片轮播但遇到了问题——图片现在是列表形式显示，不是预期的轮播滑块对吧？别担心，这个问题很常见，咱们来一步步搞定它～

问题根源 #

你当前的代码里缺少了Bootstrap的核心CSS文件。UI Bootstrap的carousel和slide组件是依赖Bootstrap的样式来实现轮播效果的：比如隐藏非活跃的幻灯片、添加切换动画、渲染轮播控制按钮等等。没有这些样式的话，指令只会输出基础的HTML结构，所有幻灯片就会默认全部显示，变成你看到的列表样式。

另外，你使用的AngularJS 1.0.8和UI Bootstrap 0.10.0是比较老的版本，UI Bootstrap 0.10.0对应的是Bootstrap 2.x系列，所以要引入对应版本的CSS才能完美匹配。

修复后的完整代码 #

下面是修改后的可运行代码，我已经添加了必要的Bootstrap CSS，并调整了自定义样式避免冲突：

<!DOCTYPE html>
<html>
<head>
    <!-- 引入Bootstrap 2.3.2 CSS，匹配UI Bootstrap 0.10.0版本 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
    <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>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="CarouselDemoCtrl" id="slides_control">
            <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>

    <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>
</body>
</html>

关键修改点说明 #

• 添加了Bootstrap 2.3.2的CSS链接：这是让轮播组件正常渲染的核心，它会给carousel和slide元素添加必要的隐藏、定位、动画样式。
• 保留了你原有的自定义样式：这些样式用来控制轮播容器的位置和图片尺寸，和Bootstrap的核心样式不冲突。

现在运行这个代码，你应该就能看到正常的轮播滑块了——图片会自动切换，也能通过轮播的控制按钮手动切换～

内容的提问来源于stack exchange，提问作者incr3dible noob