Como fazer carousel com informações do banco de dados?

26 de junho de 2016 7 respostas Resolvido

Rayner1 26 de junho de 2016

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.

7 Respostas

Felipe_Miranda 26 de jun. de 2016

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.

Rayner1 26 de jun. de 2016

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.

Solucao aceita

Felipe_Miranda 27 de jun. de 2016 1 like

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>

Rayner1 27 de jun. de 2016

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

Felipe_Miranda 27 de jun. de 2016

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>

Rayner1 27 de jun. de 2016

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.

Felipe_Miranda 28 de jun. de 2016

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

Criado 26 de junho de 2016

Ultima resposta 28 de jun. de 2016

Respostas 7

Participantes 2

7 Respostas

Topicos relacionados