Carousel

TsgcHTMLComponent_Carousel — affichez un diaporama d'images Bootstrap avec indicateurs, contrôles, lecture automatique et transitions par glissement ou fondu, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_Carousel

Un diaporama d'images basé sur le carousel de Bootstrap. Ajoutez des diapositives avec une image, une légende et une description, définissez la lecture automatique et la transition, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Carousel

Produit

Du balisage carousel Bootstrap 5

Famille

Contenu & Mise en page

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, ajoutez des diapositives, affichez-le

Ajoutez des diapositives avec AddSlide(image, caption, description), définissez Autoplay, Interval et Transition, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Diapositives

AddSlide(aImageSrc, aCaption, aDescription) ajoute une diapositive ; Items (TsgcHTMLCarouselItems) expose ImageSrc, Caption, Description et Active par diapositive.

ShowIndicators dessine les indicateurs à points et ShowControls dessine les flèches précédent/suivant.

Lecture automatique

Autoplay fait défiler les diapositives automatiquement et Interval définit le délai entre elles en millisecondes.

Transition

Transition (TsgcHTMLCarouselTransition) bascule entre ctSlide et ctFade ; Dark utilise la variante de contrôle sombre.

Dimensionnement

Height fixe la hauteur des diapositives avec recadrage en mode couverture ; CarouselID définit l'identifiant du conteneur.

Sortie

HTML renvoie le balisage carousel complet — servez-le, ou affectez-le au contenu du corps d'un modèle de page.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir