Carousel
TsgcHTMLComponent_Carousel — 渲染带有指示器、控件、自动播放和滑动或淡入淡出过渡的 Bootstrap 图片幻灯片,适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Carousel — 渲染带有指示器、控件、自动播放和滑动或淡入淡出过渡的 Bootstrap 图片幻灯片,适用于 Delphi、C++ Builder 和 .NET。
基于 Bootstrap carousel 构建的图片幻灯片。添加带有图片、标题和描述的幻灯片,设置自动播放和过渡,然后读取 HTML 属性。
用 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 标记 — 直接提供服务,或将其赋给页面模板的主体内容。