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 3rd 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 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 for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" />
</div>
</div>
<!-- Left and right controls -->
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
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 am attempting to implement a Carousel from Bootstrap in my CRA project. I am essentially using the provided code from the documentation:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
It works no problem, the carousel shows up and I am able to scroll through it. However, it does not autoplay when loaded.
Some things I tested that get it to autoplay:
I tab over to something else in my web broswer (blank tab or something), have React do a hot reload (put a new line after an import and saving works), then tab back to my development server. This starts the autoplay no problem.
Manually clicking through ALL the images on the carousel (in any order - 123, 213, 231, etc.) also starts the autoplay after a slight delay.
I'm stumped, but I have seen that Bootstrap's JavaScript can interfere with React's JavaScript. Anyone have any ideas?
In the code that you provided in the question, no mention of autoplay... why not use the Bootstrap's built in autoplay mechanism data-interval="500" - for the specific duration you need, pass the value from React... No need for us to write the JavaScript
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
<!-- Indicators -->
<ul 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>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
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 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>
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>