Inscrições abertas para nosso Webinar anual Adianti Framework 2024!
Clique aqui para saber mais
Conheça Características Quem usa Galeria Cursos Docs Fórum
Downloads
Posts Fique por dentro Sobre o Fórum Minha conta
Carrossel de Imagens Alguém já implementou um carrossel de imagens no Adianti. Poderiam me dar um ideia de como fazer?...
AR
Carrossel de Imagens  
Alisson BRAGA DA ROCHA 25/05/2020 (há 4 anos)
Alguém já implementou um carrossel de imagens no Adianti. Poderiam me dar um ideia de como fazer?
Pacotão Dominando o Adianti Framework 7
O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado! Versão 7.4


Dominando o Adianti 7 Quero me inscrever agora!

Comentários (2)

LC
Leandro Coelho       25/05/2020 (há 4 anos)

https://www.adianti.com.br/framework_files/tutor/index.php?class=CarouselView
MA
Marcelo Alves       31/05/2020 (há 4 anos)

É bem simples é apenas um array de imagens jogados em um escopo(Seção) html
  1. <?php
  2. /**
  3.  * CarouselView
  4.  *
  5.  * @version    1.0
  6.  * @package    samples
  7.  * @subpackage tutor
  8.  * @author     Pablo Dall'Oglio
  9.  * @copyright  Copyright (c) 2006 Adianti Solutions Ltd. (http://www.adianti.com.br)
  10.  * @license    http://www.adianti.com.br/framework-license
  11.  */
  12. class CarouselView extends TPage
  13. {
  14.     /**
  15.      * Page constructor
  16.      */
  17.     function __construct()
  18.     {
  19.         parent::__construct();
  20.         
  21.         $images = [];
  22.         $images[] = ['index' => '0', 'image' => "app/images/nature/nature1.jpg", 'caption' => 'Image 1', 'class' => 'active'];
  23.         $images[] = ['index' => '1', 'image' => "app/images/nature/nature2.jpg", 'caption' => 'Image 1', 'class' => ''];
  24.         $images[] = ['index' => '2', 'image' => "app/images/nature/nature3.jpg", 'caption' => 'Image 1', 'class' => ''];
  25.         $images[] = ['index' => '3', 'image' => "app/images/nature/nature4.jpg", 'caption' => 'Image 1', 'class' => ''];
  26.         
  27.         $html = new THtmlRenderer('app/resources/carousel.html');
  28.         $html->enableSection('main', []);
  29.         $html->enableSection('indicator', $images, true);
  30.         $html->enableSection('slide', $images, true);
  31.         
  32.         // wrap the page content using vertical box
  33.         $vbox = new TVBox;
  34.         $vbox->style = 'width: 100%';
  35.         //$vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
  36.         $vbox->add($html);
  37.         
  38.         parent::add($vbox);
  39.     }
  40. }
  41. ?>

Segue abaixo o html do arquivo
app/resources/carousel.html
que é apenas um clone do
https://getbootstrap.com/docs/4.0/components/carousel/#with-indicators




<!--[main]--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 50%; margin:auto"> <ol class="carousel-indicators"> <!--[indicator]--> <li data-target="#carousel-example-generic" data-slide-to="{$index}" class="comment"></li> <!--[/indicator]--> </ol> <div class="carousel-inner" role="listbox"> <!--[slide]--> <div class="carousel-item comment"> <img src="{$image}" alt="..." style="width:100%"> <div class="carousel-caption"> {$caption} </div> </div> <!--[/slide]--> </div> <!-- Controls --> <a class="carousel-control-prev" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--[/main]-->