I used angularJS along with bootstrap to display carousel. I fetched images using angular and now using ng-repeat I want to display them in a carousel. But i am facing a problem, all the images are lined one below the another. How can i resolve this issue??
My code to display carousel:
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel" align="center">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox" ng-controller="bannerCtrl">
<div>
<div class="item" data-ng-repeat="banner in banners">
<img src="{{banner.bannerUrl}}" alt="{{banner.bannerAltText}}">
<div class="carousel-caption">{{banner.bannerAltText}}</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic"
role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-example-generic"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can use offset x for your carousel images positioning.
or u can simply use angular-carousel
https://github.com/revolunet/angular-carousel
Related
I have several slides and I'm able to show all indicators if I simply enumerated them similar to the example in here: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.
However, the number of slides is dynamic that's why I am using ng-repeat. I'm trying to show all the indicators in my carousel but it only shows 1 indicator for the active slide.
Here's the HTML of my AngularJS directive.
<div class="container slide" id="myCarousel" data-interval="{{carouselVM.interval }}" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" ng-repeat="curItem in carouselVM.data">
<li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" style="background-image: url("{{curItem.image}}");" ng-repeat="curItem in carouselVM.data" ng-class="{'active' : !$index}">
<div class="item-headline" ng-bind-html="curItem.description">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left switch-button" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left fa fa-angle-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right switch-button" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right fa fa-angle-right"></span>
<span class="sr-only">Next</span>
</a><br>
</div>
How do I show all indicators on every slide?
I got what I need. The ng-repeat needs to happen in the <li> not the <ol>.
<div class="container slide" id="myCarousel" data-interval="{{carouselVM.interval }}" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}" ng-repeat="curItem in carouselVM.data"> </li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" style="background-image: url("{{curItem.image}}");" ng-repeat="curItem in carouselVM.data" ng-class="{'active' : !$index}">
<div class="item-headline" ng-bind-html="curItem.description">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left switch-button" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left fa fa-angle-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right switch-button" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right fa fa-angle-right"></span>
<span class="sr-only">Next</span>
</a><br>
</div>
I try to display my list of image in carousel. However, the images do not appear as I want.
Here is my code.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" ng-repeat="movie in actionMovies">
<div class="carousel-item">
<img class="d-block img-fluid" src="{{movie.image}}" alt="{{movie.name}}">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I tried to make the carousel with ng-repeat. The image loads successfully, but the previous and next button do not work.
Here is my code
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item {{::($index === 0 ? 'active' : '')}}" ng-repeat="movie in popularMovies track by $index">
<div class="row">
<img class="d-block w-100" src="{{movie.image}}" alt="{{movie.name}}">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Try adding your Angular Elements to the below code and it will work.
I guess your next and previous were not working because there might be few errors in importing js files
Let me know if this fixes your problem.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_1280.jpg" alt="{{movie.name}}">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg" alt="{{movie.name}}">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
When I am trying to use ng-repeat inside corousel-inner the corousel is not working properly, how to use carousel with ng-repeat ?
Not exact but seems like what you want.
<div class="container" ng-show="ifImages">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" ng-repeat="image in images">
<li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" ng-repeat="image in images">
<div class="item" ng-class="{'active': $index == 0}">
<img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" />
<div class="carousel-caption">
<h3>{{image.name}}</h3>
<p>{{image.description}}</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the second files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:
<div id="myCarousel" class="carousel slide myslider" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/d.jpg" alt="d1" class="center-block">
</div>
<div class="item">
<img src="img/c2.jpg" alt="c2" class="center-block">
</div>
<div class="item">
<img src="img/b.jpg" alt="b3" class="center-block">
</div>
<div class="item">
<img src="img/a.jpg" alt="a4" class="center-block">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>