I am unable to have a carousel with only text without any img. The text seems to be colliding with the controls. Every example I've found uses the <img>
. I have tried to use d-flex
class, block and even the carousel-caption
. Nothing has worked so far.
<div id="carouselContent" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<p>lorem ipsum (imagine longer text)</p>
</div>
<div class="carousel-item">
<p>lorem ipsum (imagine longer text)</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselContent" 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="#carouselContent" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Use the [interval]="'0'" input. This will disable the auto-sliding feature.
You don't need to use JavaScript to add a slider on a page anymore! In our web development agency, we discovered it is quite simply possible to create it with HTML and CSS just by using radio inputs and labels.
You can create slide-in text — or zoom in text — in HTML using <marquee> tags. You can make your text slide in from the left, right, top, or bottom. Note: Due to the nature of slide-in text, you may need to refresh this page several times to catch all of the examples.
I think the carousel-controls
are designed to overlay the content, whether it's text or images. It would seem that text-center
would be a good option to center the text of each item.
However, as of BS alpha 6, the .carousel-item
is display:flex;
which limits some of the positioning you can do with the contents of carousel-item
. There is an open issue for this:
https://github.com/twbs/bootstrap/issues/21611
As a workaround, you could use text-center
and override display:block
for the active carousel item:
<div class="carousel-item text-center p-4">
<p>lorem ipsum (imagine longer text)</p>
</div>
.carousel-item.active {
display:block;
}
Demo: http://www.codeply.com/go/OJHdvdXimm
Also see: Vertically center text in Bootstrap carousel
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With