Back to Devexpress

DxCarousel.LoopNavigationEnabled Property

blazor-devexpress-dot-blazor-dot-dxcarousel-f447c50f.md

latest2.0 KB
Original Source

DxCarousel.LoopNavigationEnabled Property

Specifies whether loop navigation is enabled.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(false)]
[Parameter]
public bool LoopNavigationEnabled { get; set; }

Property Value

TypeDefaultDescription
Booleanfalse

true to enable loop navigation; otherwise, false.

|

Remarks

The <DxCarousel> component allows a user to switch slides (items) from the first item to the last and back. To enable loop navigation between Carousel items, set the LoopNavigationEnabled property to true.

razor
<DxCarousel Width="500px"
            Height="300px"
            Data="@GetCarouselData()"
            LoopNavigationEnabled="true"
            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

DxCarousel Class

DxCarousel Members

DevExpress.Blazor Namespace