Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text only carousel

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>
like image 574
Santhos Avatar asked Jan 09 '17 08:01

Santhos


People also ask

How do you turn off auto slide on carousel?

Use the [interval]="'0'" input. This will disable the auto-sliding feature.

Can you make a carousel without JavaScript?

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.

How do you create a text slideshow in HTML?

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.


1 Answers

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

like image 185
Zim Avatar answered Sep 18 '22 15:09

Zim