Carrossel de Imagens

{parts/gtag_head.html} {parts/gtag_body.html}

Conheça A Ferramenta LowCode mais moderna e veloz para desenvolvimento PHP: Adianti Creator

Carrossel de Imagens Alguém já implementou um carrossel de imagens no Adianti. Poderiam me dar um ideia de como fazer?...

Alisson BRAGA DA ROCHA 25/05/2020 (há 6 anos)

Alguém já implementou um carrossel de imagens no Adianti. Poderiam me dar um ideia de como fazer?

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!

Dominando o Adianti Framework Quero me inscrever agora!

Comentários (2)

Leandro Coelho 25/05/2020 (há 6 anos)

https://www.adianti.com.br/framework_files/tutor/index.php?class=CarouselView

Marcelo Alves 31/05/2020 (há 6 anos)

É bem simples é apenas um array de imagens jogados em um escopo(Seção) html

 <?php
/**
 * CarouselView
 *
 * @version    1.0
 * @package    samples
 * @subpackage tutor
 * @author     Pablo Dall'Oglio
 * @copyright  Copyright (c) 2006 Adianti Solutions Ltd. (http://www.adianti.com.br)
 * @license    http://www.adianti.com.br/framework-license
 */
class CarouselView extends TPage
{
    /**
     * Page constructor
     */
    function __construct()
    {
        parent::__construct();
        
        $images = [];
        $images[] = ['index' => '0', 'image' => "app/images/nature/nature1.jpg", 'caption' => 'Image 1', 'class' => 'active'];
        $images[] = ['index' => '1', 'image' => "app/images/nature/nature2.jpg", 'caption' => 'Image 1', 'class' => ''];
        $images[] = ['index' => '2', 'image' => "app/images/nature/nature3.jpg", 'caption' => 'Image 1', 'class' => ''];
        $images[] = ['index' => '3', 'image' => "app/images/nature/nature4.jpg", 'caption' => 'Image 1', 'class' => ''];
        
        $html = new THtmlRenderer('app/resources/carousel.html');
        $html->enableSection('main', []);
        $html->enableSection('indicator', $images, true);
        $html->enableSection('slide', $images, true);
        
        // wrap the page content using vertical box
        $vbox = new TVBox;
        $vbox->style = 'width: 100%';
        //$vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
        $vbox->add($html);
        
        parent::add($vbox);
    }
}
?>

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 50%; margin:auto"> <ol class="carousel-indicators">  <li data-target="#carousel-example-generic" data-slide-to="{$index}" class="comment"></li>  </ol> <div class="carousel-inner" role="listbox">  <div class="carousel-item comment"> <img src="{$image}" alt="..." style="width:100%"> <div class="carousel-caption"> {$caption} </div> </div>  </div>  <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>

Novo Comentário