我正在尝试创建一个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;
}
我更新了旋转木马控制绝对位置,使其水平居中。现在控件不会在任何位置重叠标题。
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>