Карусель только с текстом

У меня не получается создать карусель только с текстом без изображения. Кажется, что текст конфликтует с элементами управления. В каждом найденном мной примере используется <img>. Я пытался использовать класс d-flex, блок и даже класс carousel-caption. Пока ничего не сработало.

<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>

bootstrap-4 twitter-bootstrap-4
person Santhos    schedule 09.01.2017    source источник
comment
Вы пытались добавить отступы к .carousel-inner?   -  person tmg    schedule 09.01.2017
comment
Добавление padding-left около 200 пикселей и padding-bottom около 50 пикселей несколько работает, но это не очень хорошо выглядит с элементами управления каруселью. Я, очевидно, тоже могу попытаться позиционировать их. Тем не менее, кажется, что должен быть более четкий способ сделать это.   -  person Santhos    schedule 09.01.2017
comment
Я нашел для себя одно рабочее решение здесь   -  person Jignesh Gohel    schedule 29.07.2019

Ответы (2)


arrow_upward
8
arrow_downward

Я думаю, что carousel-controls предназначены для наложения контента, будь то текст или изображения. Казалось бы, text-center будет хорошим вариантом для центрирования текста каждого элемента.

Однако, начиная с BS alpha 6, .carousel-item равно display:flex;, что ограничивает некоторые возможности позиционирования, которые вы можете выполнять с содержимым carousel-item. Для этого существует открытая проблема: https://github.com/twbs/bootstrap/issues/21611

В качестве обходного пути вы можете использовать text-center и переопределить display:block для активного элемента карусели:

 <div class="carousel-item text-center p-4">
       <p>lorem ipsum (imagine longer text)</p>
 </div>

.carousel-item.active {
    display:block;
}

Демонстрация: http://www.codeply.com/go/OJHdvdXimm

Также см.: Отцентрировать текст по вертикали в карусели Bootstrap

person Zim    schedule 09.01.2017
comment
Я видел проблему, но у меня почему-то возникло ощущение, что она не связана. display: block определенно помогает. Я попытался добавить 100 пикселей влево и вправо. Это хорошо вписывается в текст между элементами управления, но анимация выглядит прикольно. - person Santhos; 10.01.2017
comment
Есть ли способ заставить стрелки отображаться с этим? - person trees_are_great; 16.12.2018
comment
Стрелки отображаются вместе с ним. - person Zim; 16.12.2018

arrow_upward
0
arrow_downward

Я добавил px-5 везде (в вашем случае в p). Мне нужно было пространство вокруг, и я также добавил к нему класс, который дал ему поле в 20 пикселей. Это сработало.

person junaidshah    schedule 11.06.2019