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

DxCarousel.NavButtonsDisplayMode Property

Specifies how the Carousel displays navigation buttons.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(CarouselControlsDisplayMode.AlwaysVisible)]
[Parameter]
public CarouselControlsDisplayMode NavButtonsDisplayMode { 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 NavButtonsDisplayMode property to specify how the <DxCarousel> component displays navigation buttons.

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

Carousel - Controls Display Mode

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