Carousel

TsgcHTMLComponent_Carousel — renderize um slideshow de imagens Bootstrap com indicadores, controles, reprodução automática e transições de slide ou fade, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Carousel

Um slideshow de imagens construído sobre o carousel do Bootstrap. Adicione slides com uma imagem, legenda e descrição, defina a reprodução automática e a transição e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Carousel

Renderiza

Markup carousel do Bootstrap 5

Família

Conteúdo & Layout

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione slides, renderize

Adicione slides com AddSlide(image, caption, description), defina Autoplay, Interval e Transition e então leia HTML.

uses
  sgcHTML_Component_Carousel;

var
  oCar: TsgcHTMLComponent_Carousel;
begin
  oCar := TsgcHTMLComponent_Carousel.Create(nil);
  try
    oCar.ShowIndicators := True;
    oCar.ShowControls := True;
    oCar.Autoplay := True;
    oCar.Interval := 4000;
    oCar.Transition := ctFade;
    oCar.Height := '420px';

    oCar.AddSlide('/img/one.jpg', 'First', 'Welcome aboard');
    oCar.AddSlide('/img/two.jpg', 'Second', 'Discover more');

    WebModule.Response := oCar.HTML;   // Bootstrap carousel
  finally
    oCar.Free;
  end;
end;

// includes: sgcHTML_Component_Carousel.hpp

TsgcHTMLComponent_Carousel *oCar = new TsgcHTMLComponent_Carousel(NULL);
try
{
  oCar->ShowIndicators = true;
  oCar->ShowControls = true;
  oCar->Autoplay = true;
  oCar->Interval = 4000;
  oCar->Transition = ctFade;
  oCar->Height = "420px";

  oCar->AddSlide("/img/one.jpg", "First", "Welcome aboard");
  oCar->AddSlide("/img/two.jpg", "Second", "Discover more");

  String html = oCar->HTML;   // Bootstrap carousel
}
__finally
{
  delete oCar;
}

using esegece.sgcWebSockets;

var car = new TsgcHTMLComponent_Carousel();
car.ShowIndicators = true;
car.ShowControls = true;
car.Autoplay = true;
car.Interval = 4000;
car.Transition = TsgcHTMLCarouselTransition.ctFade;
car.Height = "420px";

car.AddSlide("/img/one.jpg", "First", "Welcome aboard");
car.AddSlide("/img/two.jpg", "Second", "Discover more");

string html = car.HTML;   // Bootstrap carousel

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Slides

AddSlide(aImageSrc, aCaption, aDescription) adiciona um slide; Items (TsgcHTMLCarouselItems) expõe ImageSrc, Caption, Description e Active por slide.

Navegação

ShowIndicators desenha os indicadores de pontos e ShowControls desenha as setas de anterior/próximo.

Reprodução automática

Autoplay alterna os slides automaticamente e Interval define o atraso entre eles em milissegundos.

Transição

Transition (TsgcHTMLCarouselTransition) alterna entre ctSlide e ctFade; Dark usa a variante de controle escura.

Dimensionamento

Height fixa a altura do slide com recorte de ajuste por cobertura; CarouselID define o id do contêiner.

Saída

HTML retorna o markup completo do carousel — sirva-o ou atribua-o ao conteúdo do corpo de um template de página.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir