Estou tentando há muito tempo utilizar o carousel para expor alguns trabalhos. Queria que abaixo da imagem aparecesse a legenda descrevendo a imagem. Como essa legenda é comprida, queria que aparecesse abaixo e não sobre a imagem. Encontrei esse exemplo que é exatamente o que eu quero, mas, quando tento importar o código, não funciona no meu site. Segue exemplo: https://www.bootply.com/aroman/117YlaCdvY
Olá, Marcelo.
Por favor, você pode adicionar o código que você está fazendo e se tiver algum erro postar ele também?
Tentei de muitas formas já resolver essa questão, até que encontrei esse link que mandei anteriormente que faz exatamente o que eu preciso. Queria que, abaixo das fotos no carousel, eu pudesse colocar uma descrição da foto. Depois de tentar de muitas formas alterando o css sem sucesso, eu tentei somente copiar o código desse bootply e aplicar, mas não funcionou. Fiz o curso de javascript tbm, mas confesso q não consegui entender muito bem o que esse js tá fazendo. Segue meu código:
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="icon" href="images/logo_com_textura.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/carousel.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container">
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/buques-sao-flores-mortas-amarelo.jpg" alt="900x500">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="images/buques-sao-flores-mortas-azul.jpg" alt="900x500">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img src="images/buques-sao-flores-mortas-laranja.jpg" alt="900x500">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="new-caption-area"></div>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<body>
</html>JS
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});CSS
.bs-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
.carousel-caption {
color: #000;
}