CarouselControlsDisplayMode Enum

Lists display modes for the Carousel‘s navigation controls (buttons or pager).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum CarouselControlsDisplayMode

Members

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

Related API Members

The following properties accept/return CarouselControlsDisplayMode values:

• DxCarousel.NavButtonsDisplayMode
• DxCarousel.PagerDisplayMode

Remarks

Use NavButtonsDisplayMode and PagerDisplayMode properties to specify how the <DxCarousel> component displays the navigation buttons and 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;
        }
    }
}