angularjs - Carousel image transition does not work (ui.bootstrap.carousel) -

-

i trying use angular-ui bootstrap carousel (reference @ http://angular-ui.github.io/bootstrap/). problem transition not work, image appear/disappear instead of moving right left demo.

i using chrome version 43.0

html:

<!doctype html> <html ng-app="ui.bootstrap.demo">   <head>     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>     <script src="example.js"></script>     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">   </head>   <body> testing <div ng-controller="carouseldemoctrl">   <div style="height: 305px">     <carousel interval="myinterval" no-wrap="nowrapslides">       <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">       <button type="button" class="btn btn-info" ng-click="addslide()">add slide</button>       <div class="checkbox">         <label>           <input type="checkbox" ng-model="nowrapslides">           disable slide looping         </label>       </div>     </div>     <div class="col-md-6">       interval, in milliseconds: <input type="number" class="form-control" ng-model="myinterval">       <br />enter negative number or 0 stop interval.     </div>   </div> </div>   </body> </html>

the example.js:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('carouseldemoctrl', function ($scope) {   $scope.myinterval = 5000;   $scope.nowrapslides = false;   var slides = $scope.slides = [];   $scope.addslide = function() {     var newwidth = 600 + slides.length + 1;     slides.push({       image: '//placekitten.com/' + newwidth + '/300',       text: ['more','extra','lots of','surplus'][slides.length % 4] + ' ' +         ['cats', 'kittys', 'felines', 'cutes'][slides.length % 4]     });   };   (var i=0; i<4; i++) {     $scope.addslide();   } });

many thanks

the solution add ng-animate dependency. this:

angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'nganimate']);

you need link script of course.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>

here plunker working (not me though).

however, adding nganimate dependency might break slider/carousel - catch 22!

if happens, read thread , try using different angular version.

edit: using version 1.3.13 of both angular , ng-animate works me - tried in project - whereas using version mismatch not work.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more