DxCarousel.SlideShowState Property

Specifies the current slide show state.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool SlideShowState { get; set; }

Property Value

Type	Default	Description
Boolean	true	true if the slide show is running; otherwise, false.

Remarks

Set the SlideShowEnabled property to true to enable the slide show functionality in a <DxCarousel> component. Use the SlideShowState property to specify the current slide show state. To respond to state changes, handle the SlideShowStateChanged event. This event is handled automatically when you use two-way data binding for the SlideShowState property (@bind-SlideShowState).

Example

The following code snippet obtains the current slide show state and changes it on a custom button click:

Razor

<DxCarousel Width="700px"
            Height="400px"
            Data="@GetCarouselData()"
            LoopNavigationEnabled="true"
            ImageSizeMode="CarouselImageSizeMode.FillAndCrop"
            SlideShowEnabled="true"
            @bind-SlideShowState="@IsRunning"
            SlideShowDelay="1500"
            SizeMode="SizeMode.Large" />

<DxButton Text="@GetButtonText()"
          RenderStyle="ButtonRenderStyle.Primary"
          RenderStyleMode="ButtonRenderStyleMode.Outline"
          IconCssClass="@GetIconCssClass()"
          Click="SlideShowControl"
          SizeMode="SizeMode.Large" />

@code {
    bool IsRunning { get; set; } = true;

    string GetIconCssClass() {
        return IsRunning ? "oi oi-media-stop" : "oi oi-play-circle";
    }
    string GetButtonText() {
        return IsRunning ? "Stop Slide Show" : "Start Slide Show";
    }

    void SlideShowControl(MouseEventArgs args) {
        IsRunning = !IsRunning;
    }
}

DataSource

List<CarouselData> GetCarouselData() {
    List<CarouselData> result = new List<CarouselData>();
    result.Add(new CarouselData("../images/image1.jpg", "Image 1"));
    result.Add(new CarouselData("../images/image2.jpg", "Image 2"));
    result.Add(new CarouselData("../images/image3.jpg", "Image 3"));
    result.Add(new CarouselData("../images/image4.jpg", "Image 4"));

    return result;
}

public class CarouselData {
    public string Src { get; set; }
    public string Alt { get; set; }

    public CarouselData(string src, string alt) {
        Src = src;
        Alt = alt;
    }
}