DxCarousel.PagerDisplayMode Property

Specifies how the Carousel displays the pager.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(CarouselControlsDisplayMode.AlwaysVisible)]
[Parameter]
public CarouselControlsDisplayMode PagerDisplayMode { get; set; }

Property Value

Type	Default	Description
CarouselControlsDisplayMode	AlwaysVisible	An enumeration value.

Available values:

Name	Description
Hidden	Navigation controls are hidden.
AlwaysVisible	Navigation controls are always visible.
VisibleOnHover	Navigation controls are visible on hover.

Remarks

Use the PagerDisplayMode property to specify how the <DxCarousel> component displays the pager.

The following code snippet hides navigation buttons and displays the pager on hover:

<DxCarousel Width="500px"
            Height="300px"
            Data="@GetCarouselData()"
            LoopNavigationEnabled="true"
            NavButtonsDisplayMode="CarouselControlsDisplayMode.Hidden"
            PagerDisplayMode="CarouselControlsDisplayMode.VisibleOnHover"
            ImageSizeMode="CarouselImageSizeMode.FillAndCrop">
</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;
        }
    }
}