Bootstrap carousel not displaying newly created item

Question

I have a div that uses a bootstrap carousel with ng-repeat. I also have a way to add items the current list of items.

So if I am in index 0 and I click the add button, I want to be able to slide to the new item.

Currently with what I have, the indexes seem to be set correctly but it just isn't sliding to the new item

$scope.items.splice($scope.currentIndex+1, 0, newItem);

$scope.currentIndex = $scope.currentIndex+1;

$('#myCarousel').carousel($scope.currentIndex);

It just shows the data from item 1 still. But when I do try and click next, it then moves to that new item.

I have also tried it with $('#myCarousel').carousel('next'); which results in the same thing

Edit:

<div id="myCarousel" class="carousel slide" data-interval="false">
    <div class="carousel-inner">
        <div class="item" ng-class="{active:!$index}" ng-repeat="item in items">
            // rest of the html
        </div>
    </div>
</div>

Vitor Rodrigues · Answer 1 · 2018-08-23T17:11:10.387

Can you post the html part? also begin with more than 1 slide so that you have at least 3 slides at the end just for debug.

Following your code i compiled something like this, don't know if it's what you are looking for

 <body ng-app="cApp" ng-controller="myslides">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
    <div ng-repeat="item in items" class="item" ng-class="{active:$index==currentIndex}" >
                <div>{{item}}</div>
            </div>
    <h1>Hello Plunker!</h1>
</div>
<a class="left carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex!=0?currentIndex-1:items.length-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex<items.length-1?currentIndex+1:0" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>

</div>
<button class="btn btn-default" ng-click="addslide('another1')">add slide</button>
 </body>

with the script

var app = angular.module('cApp', []);
app.controller('myslides', function($scope){

$scope.items = ['this is 1','this is 2'];

$scope.currentIndex = 0;

$scope.addslide=function(newItem){
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;

};
});

Aldo if you are going to use angular, i personally prefer to use angularui that has a simple carousel with prebuild functions and you can still do some customizing.

Bootstrap carousel not displaying newly created item

1 Answers1