DxCarousel.SwipeMode Property

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

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

An enumeration value.

|

Available values:

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.

See Also

DxCarousel Class

DxCarousel Members

DevExpress.Blazor Namespace