【问题标题】:angular-carousel doesn't work角度旋转木马不起作用
【发布时间】:2015-09-10 07:33:51
【问题描述】:

我正在尝试使用angular-carousel 插件来实现轮播,但没有任何效果,只是空屏幕。

这是我的html代码:

<body ng-app="carouselApp">
        <div ng-controller="carouselController">
            <ul rn-carousel>
                <li>
                    <img alt="" src="http://image.shutterstock.com/display_pic_with_logo/1860644/294403301/stock-photo-soup-vegetable-soup-bowl-294403301.jpg">
                </li>
                <li>
                    <img alt="" src="http://image.shutterstock.com/display_pic_with_logo/511399/210391630/stock-photo-grilled-chicken-breast-with-fresh-vegetables-selective-focus-210391630.jpg">
                </li>
                <li>
                    <img alt="" src="http://image.shutterstock.com/display_pic_with_logo/522076/266014253/stock-photo-fried-fish-fillet-atlantic-cod-with-rosemary-in-pan-266014253.jpg">
                </li>
                <li>
                    <img alt="" src="http://image.shutterstock.com/display_pic_with_logo/502972/264191042/stock-photo-bowl-of-healthy-fresh-fruit-salad-on-wooden-background-top-view-264191042.jpg">
                </li>
                <li>
                    <img alt="" src="http://image.shutterstock.com/display_pic_with_logo/356269/162416498/stock-photo-closeup-of-fried-rosemary-potato-wedges-in-a-rustic-setting-162416498.jpg">
                </li>
            </ul>
        </div>
    </body>

应用程序和控制器代码:

var app = angular.module('carouselApp',['angular-carousel']);

app.controller('carouselController', function($scope) {


});

我正在使用angularjs 1.4.5angular-carousel 0.3.13,我做错了什么?

【问题讨论】:

    标签: angularjs angular-carousel


    【解决方案1】:

    你的样式有问题,如果你添加一个'id'到:

    <ul rn-carousel id="theCarousel">
    

    在你的 CSS 中:

    #theCarousel{
        height:400px;
    }
    

    您的轮播将起作用!

    我会推荐你​​使用 page 中的轮播,绝对不会有任何问题。

    【讨论】:

    • 我不会,我已经尝试使用最新的更新并不断收到“无法找到指令‘幻灯片’所需的控制器‘轮播’!”问题。到目前为止,这听起来像是一个不理想的 hack,将指令覆盖为空存根。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-14
    • 2022-06-28
    • 2017-03-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多