DxCarousel.PauseSlideShowOnHover Property

Specifies whether to pause the slide show on hover.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool PauseSlideShowOnHover { get; set; }

Property Value

Type	Default	Description
Boolean	false	true to pause the slide show on hover; otherwise, false.

Remarks

Set the SlideShowEnabled property to true to enable the slide show functionality. Use the PauseSlideShowOnHover property to specify whether to pause the slide show on hover.

The following code snippet switches Carousel slides automatically and pauses the slide show on hover:

<DxCarousel Width="500px"
            Height="300px"
            Data="@GetCarouselData()"
            LoopNavigationEnabled="true"
            ImageSizeMode="CarouselImageSizeMode.FillAndCrop"
            SlideShowEnabled="true"
            PauseSlideShowOnHover="true">
</DxCarousel>

@code {
    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;
        }
    }
}