Seguinte, estou tentando usar carousel do bootstrap, para mostrar o conteúdo da minha lista retornada pelo controlador. Então, consigo listar em tabela da seguinte forma:
<table border="1">
<tr>
<th>Papeis</th>
<th>Alterar</th>
<th>Excluir</th>
</tr>
<tr th:each="papel : ${papels}">
<td th:text="${papel.papelNome}"></td>
<td><a th:href="@{/papeis/editar/{id}(id=${papel.id})}">Editar</a>
</td>
<td><a th:href="@{/papeis/excluir/{id}(id=${papel.id})}">Excluir</a>
</td>
</tr>
</table>`
Até aí, beleza, consigo trazer os dados da lista para a view, porém em uma tabela.
Mas eu gostaria de usar carousel, e eu tenho o seguinte código, com conteúdo estático.
`<body>
<div class="container">
<h1>Criando um Carousel</h1>
<div id="Carrosel" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#Carrosel" data-slide-to="0" class="active"></li>
<li data-target="#Carrosel" data-slide-to="1"></li>
<li data-target="#Carrosel" data-slide-to="2"></li>
</ol>
<!--Colocar slides-->
<div class="carousel-inner">
<div class="item active">
<img src="https://unsplash.it/1280/420?random">
<div class="carousel-caption">
<h3>Slide foto Um</h3>
<p>Subtítulo do slide Um</p>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1279/420?random">
<div class="carousel-caption">
<h3>Slide foto Dois</h3>
<p>Subtítulo do slide Dois</p>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1278/420?random">
<div class="carousel-caption">
<h3>Slide foto Três</h3>
<p>Subtítulo do slide Três</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#Carrosel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carrosel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
A dúvida é, como eu faço, usando Thymeleaf, para listar os atributos usando as imagens já definidas, mas o conteúdo de texto, ser da lista que é retornada pelo controlador.
Boa noite Rayner,
vamos vê se eu entendi, sua dúvida é exibir as imagens e conteúdos que vêm em um lista de objetos do seu controller, você quer exibir isso dentro do carousel bootstrap correto?
Mostra como seu objeto esta vindo do controller, colocando um print da inspeção no objeto, ctrl shift i, seria interessante.
abraços.
Bom dia, @Felipe_Miranda , exato. Porém, por enquanto, as imagens eu quero deixar a desta a API que estou utilizando aí no bootstrap, quero trazer o conteúdo de texto da lista, e colocar ele no <h2></h2> e na <p></p>
Segue a imagem que foi pedida.
Logo, eu quero colocar o valor de descrição e titulo, no carousel, e continuar usando as imagens desta api aí. Pois por enquanto, não estou utilizando imagens próprias.
Rayner faz um teste com o código abaixo, provavelmente vai ter adapatações, note que sua lista não contém o caminho das imagem juntamente com seu nome extensão, você deve adptar isso, abraços.
<div class="container">
<h1>Criando um Carousel</h1>
<div id="Carrosel" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#Carrosel" data-slide-to="0" class="active"></li>
<li data-target="#Carrosel" data-slide-to="1"></li>
<li data-target="#Carrosel" data-slide-to="2"></li>
</ol>
<!--Colocar slides-->
<div class="carousel-inner">
<c:forEach var="banner" items="${controller.Lista}" >
<div class="item active"> //Faça alguma lógica aqui para idenfiticar o primeiro elemento da lista e atribuir a class css item active
<img src="<c:url value="${ banner['imagem']}" />" />
<div class="carousel-caption">
<h3>${ banner['titulo'] }</h3>
<p>${ banner['descricao'] }</p>
</div>
</div>
</c:forEach>
</div>
<a class="left carousel-control" href="#Carrosel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carrosel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
1 curtida
@Felipe_Miranda, consegui, ficou desta forma:
<div class="carousel-inner">
<div th:each="secao : ${secoes}" class="item" th:classappend="${secao.id==1}?'active'">
<img th:src="@{https://unsplash.it/1280/420?random}"/>
<div class="carousel-caption">
<h3 th:text="${secao.titulo}"></h3>
<p th:text="${secao.descricao}"></p>
</div>
</div>
</div>
Agora falta só ajeitar para o <ol class="carousel-indicators">, para o número de “bolinhas” ficar igual ao tamanho da lista.
Bom dia Rayner,
para as bolinhas do slider você deve usar também um for Each, veja se consegue terminar a partir do esboço do código abaixo:
<ol class="carousel-indicators">
<c:forEach var="banner" items="${controller.Lista}" >
<li data-target="#Carrosel" data-slide-to="" class="active"></li>
</c:forEach>
</ol>
Só aparece uma bolinha com o código:
<ol class="carousel-indicators" th:each="secao : ${secoes}" >
<li data-target="#Carrosel" data-slide-to=""></li>
</ol>
Como eu posso fazer para incrementar o “data-slide-to”? Eu já tentei colocar o valor do indice mas não incrementa.
Bom noite Rayner,
vamos ao teste, tente algo como o código abaixo:
<%! int cont=0; %>
<ol class="carousel-indicators" th:each="secao : ${secoes}" >
<li data-target="#Carrosel" data-slide-to="<%= ++cont %>"></li>
</ol>
Dê uma lida nesse conteúdo da Caelum:
https://www.caelum.com.br/apostila-java-web/javaserver-pages/#6-3-listando-os-contatos-com-scriptlet
