Paging

  • 2 min to read

The DevExpress ASP.NET Image Slider (ASPxImageSlider) allows you to navigate through images using the Image Area's navigation buttons and the Navigation Bar UI.

ASPxImageSlider-Paging

The following tables list the ASPxImageSlider's paging settings:

Image Area

Property Description
ImageSliderImageAreaSettings.EnableLoopNavigation Specifies whether to implement infinite scrolling.
ImageSliderImageAreaSettings.NavigationDirection Specifies the image sliding direction (horizontal or vertical).
ImageSliderImageAreaSettings.NavigationButtonVisibility Specifies the navigation buttons' visibility.
ImageSliderBehaviorSettings.EnablePagingByClick Specifies whether an end-user can navigate through images by clicking the image's left or right side.
ImageSliderBehaviorSettings.EnablePagingGestures Specifies whether an end-user can switch thumbnails with a swipe gesture.

Navigation Bar

Property Description
ImageSliderNavigationBarSettings.Position Specifies the navigation bar's position relative to the image area.
ImageSliderNavigationBarSettings.Mode Specifies if the navigation bar displays its items as dots or thumbnails.
ImageSliderNavigationBarSettings.ThumbnailsModeNavigationButtonVisibility Specifies navigation buttons' visibility in the navigation bar. This property is in effect for the Thumbnails mode only.
ImageSliderNavigationBarSettings.PagingMode Specifies whether end-users scroll all the visible thumbnails in the navigation bar or one by one.
ImageSliderNavigationBarSettings.VisibleItemsCount Specifies the number of thumbnails displayed within the navigation bar when the image area is hidden.

Virtual Paging Mode

The ASPxImageSlider loads all its items when the control is initialized, by default. The virtual paging mode enables end-users to load images on demand when navigating.

Set the ImageSliderBehaviorSettingsBase.EnableVirtualPaging property to true to enable this functionality.

The following table lists the API members related to the Image Slider's virtual paging mode:

Property Description
ImageSliderBehaviorSettingsBase.VirtualPagingItemsPerRequest Specifies the minimum number of items the Image Slider loads when an end-user clicks the navigation button.
ASPxClientImageSlider.ItemLoadedOnCallback Fires for each Image Slider's item that is loaded on a callback (when the virtual paging mode is enabled).

Online Demo

ASPxImageSlider - Virtual Paging

You can navigate through the Image Slider items using the client-side API listed in the following table:

API Member Description
ASPxClientImageSlider.GetActiveItem/ASPxClientImageSlider.SetActiveItem Gets and sets the active item.
ASPxClientImageSlider.GetActiveItemIndex/ASPxClientImageSlider.SetActiveItemIndex Gets and sets the active item index.
ASPxClientImageSlider.GetItem/ASPxClientImageSlider.GetItemByName Get an item with the specified index/name.
ASPxClientImageSlider.GetItemCount Gets the number of items.
ASPxClientImageSlider.GetLoadedItems Gets the loaded items.
ASPxClientImageSlider.ActiveItemChanged Occurs after the active image displayed within the image area changes.
ASPxClientImageSlider.ItemClick Fires after an end-user clicks an item within the image area.