blazor-devexpress-dot-blazor-ab091cb7.md
Lists display modes for the Carousel‘s navigation controls (buttons or pager).
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public enum CarouselControlsDisplayMode
| Name | Description |
|---|---|
Hidden |
Navigation controls are hidden.
|
| AlwaysVisible |
Navigation controls are always visible.
|
| VisibleOnHover |
Navigation controls are visible on hover.
|
The following properties accept/return CarouselControlsDisplayMode values:
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;
}
}
}
See Also