Paging
- 2 minutes to read
The DevExpress MVC Image Slider (ImageSliderExtension) extension allows you to navigate images using the Image Area‘s navigation buttons and the Navigation Bar UI.
The following tables list the Image Slider’s paging settings:
Image Area
| Property | Description |
|---|---|
| ImageSliderImageAreaSettings.EnableLoopNavigation | Specifies whether to implement infinite scrolling. |
| ImageSliderImageAreaSettings.NavigationDirection | Specifies the image sliding direction (horizontal, 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 the navigation buttons visibility within the navigation bar. This property is in effect for 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 Image Slider loads all items when the extension 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.
@Html.DevExpress().ImageSlider(settings => {
...
settings.SettingsBehavior.EnableVirtualPaging = true;
settings.SettingsBehavior.VirtualPagingItemsPerRequest = 30;
...
}).GetHtml()
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 callback (when the virtual paging mode is enabled). |
Online Demo
To see this feature in action, please refer to the following online demo: ImageSlider - Virtual Paging.
Navigation in Code
You can navigate through the Image Slider items using 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. |