Skip to main content

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.

ASPxImageSlider-Paging

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.

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.