DxCarousel.AllowPagingByClick Property

Specifies whether users can click the slide to go forward or back.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool AllowPagingByClick { get; set; }

Property Value

Type	Default	Description
Boolean	true	true to navigate forward/back when users click a slide; otherwise, false.

Remarks

The <DxCarousel> component allows users to click the right or left side of the content area to switch slides. To disable paging by mouse clicks, set the AllowPagingByClick property to false. Paging by mouse clicks is also disabled when the NavButtonsDisplayMode property is set to Hidden.

The following code snippet disables paging by mouse clicks:

<DxCarousel Width="500px"
            Height="300px"
            Data="@GetCarouselData()"
            LoopNavigationEnabled="true"
            ImageSizeMode="CarouselImageSizeMode.FillAndCrop"
            AllowPagingByClick="false">
</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;
        }
    }
}