Question

我正在使用rn-carousel进行图像滑动。但是我无法在屏幕上显示图像。我的意思是在设备图像上构建应用程序未显示之后，任何人都可以建议我需要做什么.Plaese帮助我。 ......谢谢你。

的index.html

 <link href="css/angular-carousel.css" rel="stylesheet" type="text/css" />
    <script src="lib/angular-touch/angular-touch.js"></script>
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/angular-carousel/1.0.1/angular-carousel.js"></script>


<ul rn-carousel class="image">
    <li ng-repeat="slide in slides">
        <div class="layer">

          <img ng-src="{{slide.image}}" >

        </div>
    </li>
</ul>

app.js： -

angular.module('starter', ['ionic','angular-carousel'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller('CarouselController', function($scope) {

  $scope.slides = [{
        "image": "http://rack.3.mshcdn.com/media/ZgkyMDEzLzA2LzEzL2EwL0NvbG9yZnVsQmlyLmQ1ZDIzLmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/fd72a0e8/160/Colorful-Bird.jpg"


    }, {

        "image": "https://i.ytimg.com/vi/Dbo3eoNN5tc/maxresdefault.jpg"

    }, {


        "image": "http://www.birds.com/wp-content/uploads/home/bird.jpg"
    }, {

        "image": "https://i.ytimg.com/vi/Dbo3eoNN5tc/maxresdefault.jpg"

    }, {

        "image": "https://upload.wikimedia.org/wikipedia/en/f/f3/Batmananimated32.png"

    }, {

        "image": "http://weknowyourdreamz.com/images/batman/batman-02.jpg"

    }



]




});

Answer 1

或许尝试这样的事情：

有一个有效的例子：http://plnkr.co/edit/VruPSSkVK47YgeUwYO7l?p=preview HTML：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>Building Angular Directives</title>
    <link href="css/angular-carousel.min.css" rel="stylesheet" type="text/css" />
    <style>
        ul {
            height:300px;
            width: 600px;
            background:blue;
        }
        img.alignLeft {
            float: left;
        }
    </style>

    <!-- Angular Components -->
    <script type="text/javascript" src="angular/angular.js"></script>
    <script type="text/javascript" src="angular/angular-touch.js"></script>
    <script type="text/javascript" src="angular/angular-carousel.js"></script>

    <!-- App definition -->
    <script type="text/javascript" src="app.js"></script>

    <!-- Controllers -->
    <script type="text/javascript" src="controllers/my-controllers.js"></script> 
</head>

<body>
    <div ng-controller="HomeController">
        <ul rn-carousel rn-carousel-controls class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slide" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="zoom" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="hexagon" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slideAndFade" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="none" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
    </div>
</body>

家庭控制器：

$scope.kittens = [
        ['http://placekitten.com/g/200/300','http://placekitten.com/g/200/301','http://placekitten.com/g/200/303'],
        ['http://placekitten.com/g/200/301','http://placekitten.com/g/200/303','http://placekitten.com/g/200/300'],
        ['http://placekitten.com/g/200/303','http://placekitten.com/g/200/300','http://placekitten.com/g/200/301']
];

rn-carousel没有在屏幕上显示图像

1 个答案: