I am trying to align my carousel to the center but it is not functional as shown in the image.
Here is HTML code for it:
<div class="c-wrapper" position="absolute" align="center">
<div class="col-sm-6 col-md-6" position="absolute" align="center">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" margin: auto; width: 500px; position="absolute" align="center">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/temple.jpg" alt="temple" class="img-responsive";>
</div>
<div class="item">
<img src="img/harmonium.jpg" alt="harmonium"
class="img-responsive";>
</div>
<div class="item">
<img src="img/tabla.jpg" alt="tabla" class="img-responsive">
</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>
</div>
</div>
You only have added one div tag with - col-sm-6 col-md-6. so, it is only occupying the first six cells of the page. Bootstrap divides the page into 12 cells. so use 3 div tags and first empty div with value as col-sm-3 col-md-3, followed by second div you already have and add another empty div with value as col-sm-3 col-md-3.
<div class="col-sm-6 col-md-6">
|
|
</div>
Here is the fully functional code for carousel
<div class="col-md-12 col-lg-12">
<div class="col-md-6 col-lg-6" style="margin-left: 25%;">
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/temple.jpg" alt="temple" class="img-responsive";>
</div>
<div class="item">
<img src="img/harmonium.jpg" alt="harmonium" class="img-responsive";>
</div>
<div class="item">
<img src="img/tabla.jpg" alt="tabla" class="img-responsive">
</div>
</div>
<a class="left carousel-control"
data-target="#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"
data-target="#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>
<h4>
<p class="text-center"> <figcaption>culpa qui officia deserunt mollitia</figcaption> </p>
</h4>
</div>
</div>
</div>
Related
I have added Bootstrap in Angular-Seed project. The carousel-indicators are working fine but there is problem with the Prev/Next button.
On clicking Prev button, it switches to Last image & stays on it even if you click prev again. On clicking Next button, it switches to 2nd image & stays on it.
Tried replacing JQuery/Bootstrap with the CDN links but their versions is not the issue.
Here is the carousel I'm using:-
<div class="container">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselControls" data-slide-to="0" class="active"</li>
<li data-target="#carouselControls" data-slide-to="1"></li>
<li data-target="#carouselControls" data-slide-to="2"></li>
<li data-target="#carouselControls" data-slide-to="3"></li>
<li data-target="#carouselControls" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block w-100" src="Main.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="mainOne.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="numberFive.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="numberFour.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="numberThree.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#carouselControls" 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="#carouselControls" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</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>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3 home__li-align" ng-
repeat="electronic in allItem.slice(0,4) | filter :enter code here 'electronics'">
<a ui-sref="" ng-click="`enter code here`view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 home__li-align" ng-repeat="electronic in allItem.slice(4,8) | filter : 'electronics'">
<a ui-sref="" ng-click="view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-bottom: 70px; margin-left: -70px; color: black;"><i class="glyphicon glyphicon-chevron-left" ></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-bottom: 70px; margin-right: -70px; color: black;"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
Only item active class is working and i want 4 div in one slide of carousel then on clicking carousel control. It should bring next carousel having 4 div.So any Solution of that?
I can understand your problem and i created solution fiddle please follow below link.
<script>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl",MyCtrl);
function MyCtrl($scope) {
$scope.list = [];
for(var i = 0; i< 16;i++){
$scope.list.push(i);
}
}
</script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(0,4)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(4,8)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</div>
</div>
</div>
<!-- Controls -->
<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>
</div>
http://jsfiddle.net/r2wLz6xr/507/
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>
Can someone help me with this? Everything works fine except when you click the right control it goes to the last slide, when you click the left it always goes to the second slide, here is the code.
<!-- BEGIN Carousel Element -->
<div class="container">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="carousel" data-slide-to="0" class="active"></li>
<li data-target="carousel" data-slide-to="1"></li>
<li data-target="carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/lol1.jpg" alt="">
<div class="carousel-caption">
<h3>Pentakill - Smite and Ignite Now Available</h3>
</div>
</div>
<div class="item" data-slide-number="1">
<img src="img/d3ros.jpg" alt="">
<div class="carousel-caption">
<h3>Diablo 3</h3>
<p>Reaper of Souls</p>
</div>
</div>
<div class="item" data-slide-number="2">
<img src="img/twitchtv.jpg" alt="">
<div class="carousel-caption">
<h3>Twitch.TV Streaming</h3>
<p>Coming Soon</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript" >
$('.carousel').carousel();
</script>
</div>