8
Ich versuche, ein Karussell mit UI-Bootstrap für angularjs zu machen, ich kopierte im Grunde direkt aus dem eckigen Dokument, und es funktioniert, aber es funktioniert nicht mehr auf der letzten Folie.angularjs corousel funktioniert nicht
Es ist nicht zu beggining zurückkommen, und die Kontrollen nicht mehr funktionieren, im nicht alle Fehler auf der Konsole bekommt, stoppt er einfach
<carousel interval="myInterval">
<slide ng-repeat="slide in carousel" active="slide.active">
<img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;">
</slide>
</carousel>
EDIT Arbeit: Ich habe wieder überprüft und es nicht stoppt Wenn man bei der letzten Folie arbeitet, bleibt es tatsächlich bei der zweiten, egal wie viele Elemente es gibt.
EDIT: Ich habe eine Teststelle nur mit dem Karussell und arbeitet immer noch nicht
Dies ist der gesamte Code ist, ist es bei slide stops 2 und die Kontrollen zu stoppen
<html >
<head>
<title>Radiosan Site</title>
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css">
<script src="app/assets/lib/jquery/jquery-2.1.0.min.js" ></script>
<script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" ></script>
<script src="app/assets/lib/angular/angular.min.js" ></script>
<script src="app/assets/lib/angular/angular-route.min.js" ></script>
<script src="app/assets/lib/angular/angular-animate.min.js" ></script>
<script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="app/RadiosanApp.js" ></script>
</head>
<body ng-app="RadiosanApp">
<div class="container">
<div ng-controller="MainController">
<div style="height: 305px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="row">
<div class="col-md-6">
<a class="btn btn-info" ng-click="addSlide()">Add Slide</a>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
</div>
</div>
</div>
<script src="app/controllers/MainController.js"></script>
</body>
var app =
angular.module(
"RadiosanApp", [
"ngRoute",
"ui.bootstrap",
"ngAnimate",
"RadiosanApp.Controllers.MainController"
]);
angular.module("RadiosanApp.Controllers.MainController", [])
.controller("MainController", function($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
das einzige, was funktioniert, sind die kleinen Punkte, um eine Folie zu wählen –
Könnten Sie es in eine JS Fiddle setzen? – rob
Meine Website und App sind viel zu groß für eine Geige ... außer ... ein kleiner Test in der Geige funktioniert es gut: P .... und ich bin im Grunde kopieren und einfügen, ich weiß wirklich nicht, warum es stoppt –