Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.
This repository was archived by the owner on May 29, 2019. It is now read-only.

Problem with carousel after hiding and showing #1513

Closed
@uriva

Description

@uriva

Hi there,
Whenever I hide the carousel, wait a couple of seconds and show it, the left and right arrows no longer work and the carousel doesn't auto cycle.

For some reason I can't save a plunker but here's the html:

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="CarouselDemoCtrl">
    <input type="checkbox" ng-model="hide">Click to hide
    <div ng-hide="hide">
      <carousel interval="2000">
        <slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.url}}" style="margin:auto;">
          <div class="carousel-caption">
            <p>{{slide.description}}</p>
          </div>
        </slide>
      </carousel>
    </div>
  </div>
</body>

</html>

And js:

angular.module('plunker', ['ui.bootstrap']);
function CarouselDemoCtrl($scope) {
  $scope.slides = [{
      url: 'http://i.imgur.com/xKE07.jpg',
      description: 'bla'
    }, {
      url: 'http://wpmedia.blogs.windsorstar.com/2013/01/cat_shot_by_arrow-1.jpg',
      description: 'bli'
    }];
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions