0

I have the following problem when trying to add the bootstrap carousel ui where I can not see the image that I am calling on js

import

 <!-- <link href="resource/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/css/estilos.css" rel="stylesheet" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<script type='text/javascript' src='./resource/angular-1.5.5/angular.js'></script>
<script type='text/javascript' src='./app/controllers/Gallery2.js'></script>
<script type='text/javascript' src='./resource/framework/ui-bootstrap-tpls-2.0.2.js'></script>
<script type='text/javascript' src='./resource/angular-1.5.5/angular-animate.js'></script>

html

            <div class="span10" >
            <!--Body content-->
            <div ng-controller="CarouselDemoCtrl">
                <div style="height: 305px">
                    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
                        <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                            <img ng-src="{{slide.Path}}" style="margin:auto;">
                            <div class="carousel-caption">
                                <h4>Slide {{slide.ImageID}}</h4>
                                <p>{{slide.Title}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

js

angular.module('myModule', ['ngAnimate', 'ui.bootstrap']).controller('CarouselDemoCtrl',function ($scope) {
    $scope.myInterval = 5000;
    $scope.slides = [[
        {
            "ImageID": 1,
            "Title": "Tulips",
            "Summary": "This is summary of Tulips",
            "Path": "\\resource\\img\\logo.png"
        }
    ]];

});

I also appears attributes this active , interval, wrap, index:

Attribute index is not allowed

I'd appreciate your help

Mario Aaron Gonzalez Sanchez
  • 29
  • 1
  • 8

1 Answers1

0

You are tracking by the property id in <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">, $scope.slides items do not have that property. You can track by ImageId or change it to id. I included a link to a working jsFiddle based off your example for you.

http://jsfiddle.net/gbsmit03/6c7z3fxk/

Ben Smith
  • 62
  • 1
  • 7
  • Thanks it worked! And be able to point to a picture in my project?   Path: '/resource/img/logo.png' and I can not view it – Mario Aaron Gonzalez Sanchez Aug 18 '16 at 18:27
  • Are you asking why your image is not working? Are you seeing any errors in you network or console? Does the URL work when you try to view the image directly in the browser? – Ben Smith Aug 18 '16 at 21:22