DxCarousel.SwipeMode Property

Specifies whether users can switch slides with swipe gestures or the mouse pointer.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(CarouselSwipeMode.TouchAndPointer)]
[Parameter]
public CarouselSwipeMode SwipeMode { get; set; }

Property Value

Type	Default	Description
CarouselSwipeMode	TouchAndPointer	An enumeration value.

Available values:

Name	Description
None	Users cannot switch slides with swipe gestures or the mouse pointer.
Touch	Users can switch slides with swipe gestures only.
TouchAndPointer	Users can switch slides with both swipe gestures and the mouse pointer.

Remarks

The <DxCarousel> component allows users to navigate slides with swipe gestures and mouse pointer operations. Use the SwipeMode property to allow swipe gestures only (SwipeMode = Touch) or to disable both methods (SwipeMode = None).

The following code snippet disables navigation with swipe actions:

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

In TouchAndPointer mode, mouse swipe gestures do not work if they start on <input>, <textarea>, <select>, or any HTML element with the contenteditable attribute enabled. These elements natively handle mouse click-and-drag events (primarily for text selection) that interfere with swipe gestures.