Skip to main content
All docs
V25.1
  • DxCarousel.AllowPagingByClick Property

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

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.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;
            }
        }
    }
    
    See Also