Paging
- 2 minutes 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.
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
Navigation in Code
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. |