Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

C#
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:

#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:

Razor
<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;
        }
    }
}
See Also