Carousel

TsgcHTMLComponent_Carousel — Delphi, C++ Builder 및 .NET에서 표시기, 컨트롤, 자동 재생 및 슬라이드 또는 페이드 전환을 갖춘 Bootstrap 이미지 슬라이드쇼를 렌더링합니다.

한눈에 보기

TsgcHTMLComponent_Carousel

Bootstrap carousel 위에 구축된 이미지 슬라이드쇼입니다. 이미지, 캡션 및 설명이 있는 슬라이드를 추가하고, 자동 재생과 전환을 설정한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_Carousel

렌더링

Bootstrap 5 carousel 마크업

패밀리

콘텐츠 및 레이아웃

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 슬라이드를 추가하고, 렌더링하기

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를 제공합니다.

자동 재생

Autoplay는 슬라이드를 자동으로 순환시키고, Interval은 슬라이드 간 지연 시간을 밀리초 단위로 설정합니다.

전환

Transition(TsgcHTMLCarouselTransition)은 ctSlide와 ctFade 사이를 전환합니다. Dark는 다크 컨트롤 변형을 사용합니다.

크기 조정

Height는 커버 맞춤 자르기로 슬라이드 높이를 고정합니다. CarouselID는 컨테이너 id를 설정합니다.

출력

HTML은 전체 carousel 마크업을 반환합니다 — 제공하거나, 페이지 템플릿의 본문 콘텐츠에 할당하십시오.

리소스

계속 살펴보기

	모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기