Блог

Главная - Вопросы по программированию - Bootstrap 4 подписи к карусели внизу

Bootstrap 4 подписи к карусели внизу

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

Я пытаюсь создать карусель Bootstrap 4, которая будет отображать подписи под изображением, а не поверх него. Я могу это сделать, но проблема, с которой я сталкиваюсь, заключается в том, что элементы управления учитывают высоту заголовка div при центрировании, поэтому выравнивание по вертикали отключено.

Любой совет о том, как это исправить, был бы оценен.

Codeply:http://codeply.com/go/lTDzvXp7IP

HTML

         <section class="media-gallery bg-light">            
        <div class="container">
            <div class="row d-flex justify-content-center">
                <div class="col-12 col-lg-11">
                    <div id="carouselExampleControls" class="carousel slide captioned" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=16" alt="First slide">
                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>
                                <div class="media-caption">
                                    <p>This is paragraph text that is the caption of the image. I wonder what happens if this caption is very long? For example, what does it do to the credit?</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=136" alt="First slide">
                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>
                                <div class="media-caption">
                                    <p>This is paragraph text that is the caption of the image.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=316" alt="First slide">
                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>
                                <div class="media-caption">
                                    <p>This is paragraph text that is the caption of the image. This caption is slightly different than the other, though idk why.</p>
                               </div>
                           </div>
                       </div>
                       <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
                           <span class="sr-only">Next</span>
                       </a>
                   </div>
               </div>
           </div>
       </div>       
   </section>

CSS

 .media-gallery {
    font-family: "Arial";
    font-size: 14px;
}

.carousel-caption {
    position: relative;
    border: 1px solid black;
    top: 0;
    left: 0;
    color: black;
    text-align: left;
    padding: 20px;
}

.carousel .carousel-control-prev, .carousel .carousel-control-next {
    font-size: 30px;
    background: none;
}

Комментарии:

1. вы хотите переместиться ниже изображения?

2. Да — я бы хотел, чтобы подписи отображались под изображением.

Ответ №1:

Я обновил абсолютное положение элемента управления каруселью, чтобы расположить его по центру по горизонтали. Теперь элемент управления не будет перекрывать заголовок ни в какой позиции.

 jQuery(function ($) {
    $('.carousel').carousel();
    var caption = $('div.carousel-item:nth-child(1) .media-content');
    $('.new-caption-area').html(caption.html());
    caption.css('display', 'none');

    $(".carousel").on('slide.bs.carousel', function (evt) {
        var caption = $('div.carousel-item:nth-child('   ($(evt.relatedTarget).index()   1)   ') .media-content');
        $('.new-caption-area').html(caption.html());
        caption.css('display', 'none');
    });
});  
 .media-gallery {
    font-family: "Arial";
    font-size: 14px;
}

.carousel-caption {
    position: relative;
    border: 1px solid black;
    top: 0;
    left: 0;
    color: black;
    text-align: left;
    padding: 20px;
}

.carousel .carousel-control-next,
.carousel .carousel-control-prev {
    z-index: 999;
    width: 45px;
    height: 45px;
    font-size: 30px;
    background: rgba(255, 255, 255, 0.25) none repeat scroll 0 0;
    border-radius: 100%;
    padding: 0 0 10px 0px;
    line-height: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    top: 50%;
    bottom: 50%;
    width: 5%;
    opacity: 1;
    position: absolute;
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    font-size: 30px;
    background: none;
}

.carousel .carousel-control-next {
    right: 20px;
}  
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<section class="media-gallery bg-light">
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="col-12 col-lg-11">
                <div id="carouselExampleControls" class="carousel slide captioned" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=16" alt="First slide">
                            <div class="media-content">
                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>
                                <div class="media-caption">
                                    <p>This is paragraph text that is the caption of the image. I wonder what happens if this caption is very long? For example, what does it do to the credit?</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=136" alt="First slide">
                            <div class="media-content">
                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>
                                <div class="media-caption">
                                    <p>This is paragraph text that is the caption of the image.</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=316" alt="First slide">
                            <div class="media-content">
                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>
                                <div class="media-caption">
                                    <p>This is paragraph text that is the caption of the image. This caption is slightly different than the other, though idk why.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <div class="new-caption-area"></div>
            </div>
        </div>
    </div>
</section>

Комментарии:

1. Хм — все еще выглядит так, что стрелки не центрированы по вертикали на изображении, только по горизонтали… если только я чего-то не упускаю.

Ответ №2:

Я использую Bootstrap 4.5.2, и это сработало для меня. Создайте пустой блок абзаца под вашим изображением, и он поместит заголовок с индикаторами под изображение:

 <!-- Wrapper for carousel items -->    
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="my-image.png" alt="First slide">
        <p id="block-under-image"></p>
        <div class="carousel-caption">
            <p>My text goes here.</p>
        </div>
    </div>
</div>

CSS:

 #block-under-image {
    background-color: black;
    height: 9em;
}

Ответ №3:

Вам просто нужно использовать правильный z-индекс, значение по умолчанию равно 1

 .carousel-control-next, .carousel-control-prev {
    z-index: 10000001;
}