Develop Reference

Bootstrap carousel keyboard buttons only work after clicking arrow on screen

Does anyone know how to override the default bootstrap carousel functionality of keyboard left and right buttons working only after first clicking one of the arrows on the screen.
I have rows of cards which when clicked opens a modal and inside that modal I have my carousel. I'd like the user to immediately be able to use the keyboard arrows and not have to click the arrows on the screen to enable the keyboard arrows to work. This appears to be the default behavior.
I've tried using $(#exampleId).focus() on various elements in the modal and carousel but no luck getting it to work thus far.
The default behavior can be seen in the bootstrap carousel doc:
https://getbootstrap.com/docs/5.0/components/carousel/#with-controls
Bootstrap-5 Carousel with controls code:
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Edit:
After following bootstrap documentation link you'll see that you can only slide the carousel using the keyboard after clicking one of the controls on the carousel "<" or ">". If you just start by using your left or right arrow keyboard buttons the carousel doesn't respond.

Dynamic background color in Bootstrap Carousel with AngularJS

I have a strange behaviorin Bootstrap Carousel which I am using with AngularJS. Below is the HTML code where I am trying to dynamically add background color to each thumbnail. What I observe is the following:
Initially, the "active" part of carousel adds background color dynamically to each thumbnail as expected.
However, once I start rotating the carousel, all thumbnails lose their background color.
Now, when I reload the page, all thumbnails get background color again.
So I cannot understand what causing the loss of background color initially during rotation? Thanks.
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div ng-repeat="imgSet in imgSets" ng-class="{item: true, active : $first}">
<div ng-class="row">
<div ng-repeat="img in imgSet track by img.id" class="col-sm-3">
<a href="/appDetail/{{img.id}}" class="thumbnail" style="background-color: {{img.tile_color}};">
<img ng-src="{{uri}}/{{img.image}}" alt="Image" class="img-responsive" height="{{img.tile_height}}" width="{{img.tile_width}}">
</a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->

Well I found how to fix it, but I still do not understand why the original is not working (and why the fix is working):
my {{img.tile_color}} is a string of the form "#1956B7" (or any other #). I thought one must have "#" sign in front of the number. When I removed the "#" it started working.

Bootstrap slideshow previous and next buttons/ arrows not showing in the middle

I am new to bootstrap and having hard time figuring out why the previous and next arrows are NOT show in the middle of the slideshow images.
The arrows are showing on the top of the slideshow and can barely seen.
Here is what I used to add the slideshow to the page.
<div id="mainBanner" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="imgs/image1.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image2.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image3.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image4.jpg" class="slidImageSize"/>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="#mainBanner" data-slide="prev"><</a>
<a class="carousel-control right" href="#mainBanner" data-slide="next">></a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="resources/js/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below) -->
<script src="resources/css/js/bootstrap.js"></script></div>
I can add some styling to a custom CSS class but I am wondering if I missed anything when using bootstrap.

According to documentation, instead of < and > you have to put <span class="glyphicon glyphicon-chevron-right"></span>
Example: http://jsfiddle.net/bortao/6SVCM/

Implementing twitter bootstrap carousel v2.3.2

I am having trouble implementing the bootstrap carousel. Can anyone look at the following html and js and give me instructions on how to implement the slide. The .js has not been edited and the carousel is installed on the body hero unit. Do I implement the carousel api? How do I define the carousel I am using within the .js file? Thanks.
<div class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Note: this answer was originally for Bootstrap 2.3.2 (may not work with version 3)
You have to put the class "item" on all of your slides and the class "active" on the first slide. This worked for me.
<div class="carousel">
<div class="carousel-inner">
<!-- your slide -->
<div class="hero-unit item active">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
</div>
</div>
And like Christopher said you need to use this function to initiate it.
<script type="text/javascript">
$(function(){
$('.carousel').carousel();
});
</script>

My understanding is that
<div class="carousel">
Needs to be
<div id="myCarousel" class="carousel">
where the id is whatever the "Arrows"' href is.

The documentation for Bootstrap Carousel is available here: http://twitter.github.com/bootstrap/javascript.html#carousel
I guess you would need to add something like this to get it running:
<script type="text/javascript">
$(function(){
$('.carousel').carousel();
});
</script>

You have no items in your example code.
to get it to work you need to have at least two items, with in your carousel-inner div.
create a second item
make sure the first item has the active class; this starts the ball rolling
the bare code should look like this
.
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>

This is in Joomla 3.1.1 with the Protostar template which is based on Bootstrap.
I did't get the carousel to automticly cycle. This worked for me:
Use a Custom html module, add this code:
(change the img scr, alt text and caption text to customize)
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators" style="list-style: none;">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="images/headers/maple.jpg" alt="imagetext 1" />
<div class="carousel-caption">
<h4>Exampletext 1</h4>
</div>
</div>
<div class="item">
<img src="images/headers/raindrops.jpg" alt="imagetext 2" />
<div class="carousel-caption">
<h4>Exampletext</h4>
</div>
</div>
<div class="item">
<img src="images/headers/windows.jpg" alt="imagetext 3" />
<div class="carousel-caption">
<h4>Exampletext</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- Call Carousel -->
<script type="text/javascript">
(function($){$('.carousel').carousel({ interval: 5000, pause:'hover'});
})(jQuery);
</script>
This adjustments in the index.php of your template is to prevent confict between scripts, it disables mootools which causes the carousel to open and close beween slides:
// CSUTOM disable mootools-more.js
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-core.js']);
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-more.js']);

Sliding images in Bootstrap's Carousel next to eachother

Please take a look at the carousel in this link.
Is there a way I can alter the code of Twitter Bootstrap's carousel to make the images slide properly instead of messing up like they do now?

Try to add to the outer div containing the carousel with classname 'carousel', the extra classname: 'slide'.
You will get an sliding carousel with this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

I looked at your code and all of your images are wrapped within a <div class="item">...</div> which is correct. However, one of these must be set to active so you'd need to make one of them <div class="item active">.