Carousel
TsgcHTMLComponent_Carousel — インジケーター、コントロール、自動再生、スライドまたはフェードのトランジションを備えた Bootstrap 画像スライドショーを Delphi、C++ Builder、.NET でレンダリングします。
TsgcHTMLComponent_Carousel — インジケーター、コントロール、自動再生、スライドまたはフェードのトランジションを備えた Bootstrap 画像スライドショーを Delphi、C++ Builder、.NET でレンダリングします。
Bootstrap の carousel 上に構築された画像スライドショーです。画像、キャプション、説明を持つスライドを追加し、自動再生とトランジションを設定したら、HTML プロパティを読み取ります。
TsgcHTMLComponent_Carousel
Bootstrap 5 の carousel マークアップ
Delphi, C++ Builder, .NET
AddSlide(image, caption, description) でスライドを追加し、Autoplay、Interval、Transition を設定したら、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最もよく使うメンバー。
AddSlide(aImageSrc, aCaption, aDescription) がスライドを追加します。Items（TsgcHTMLCarouselItems）は、スライドごとに ImageSrc、Caption、Description、Active を公開します。
ShowIndicators がドットインジケーターを描画し、ShowControls が前後の矢印を描画します。
Autoplay がスライドを自動で切り替え、Interval がその間隔をミリ秒単位で設定します。
Transition（TsgcHTMLCarouselTransition）が ctSlide と ctFade を切り替えます。Dark はダークなコントロールのバリアントを使います。
Height は、カバーフィットのトリミングでスライドの高さを固定します。CarouselID はコンテナの id を設定します。
HTML は完全な carousel マークアップを返します — そのまま配信するか、ページテンプレートのボディコンテンツに割り当てます。