Back to Devexpress

Paging

aspnet-120256-components-data-and-image-navigation-image-slider-concepts-paging.md

latest5.2 KB
Original Source

Paging

  • Jun 16, 2022
  • 2 minutes to read

The DevExpress ASP.NET Image Slider’s (ASPxImageSlider) Image Area navigation buttons and Navigation Bar UI allow you to navigate through images.

The following tables list the ASPxImageSlider’s paging settings:

Image Area

PropertyDescription
ImageSliderImageAreaSettings.EnableLoopNavigationSpecifies whether to implement infinite scrolling.
ImageSliderImageAreaSettings.NavigationDirectionSpecifies the image sliding direction (horizontal or vertical).
ImageSliderImageAreaSettings.NavigationButtonVisibilitySpecifies the navigation button visibility.
ImageSliderBehaviorSettings.EnablePagingByClickSpecifies whether a user can click an image’s left or right side to navigate through images.
ImageSliderBehaviorSettings.EnablePagingGesturesSpecifies whether a user can switch thumbnails with a swipe gesture.

Navigation Bar

PropertyDescription
ImageSliderNavigationBarSettings.PositionSpecifies the navigation bar’s position relative to the image area.
ImageSliderNavigationBarSettings.ModeSpecifies if the navigation bar displays its items as dots or thumbnails.
ImageSliderNavigationBarSettings.ThumbnailsModeNavigationButtonVisibilitySpecifies navigation button visibility in the navigation bar. This property is in effect for Thumbnails mode only.
ImageSliderNavigationBarSettings.PagingModeSpecifies whether users scroll all visible thumbnails in the navigation bar or one by one.
ImageSliderNavigationBarSettings.VisibleItemsCountSpecifies 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. Virtual paging mode enables users to load images on demand during navigation.

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:

PropertyDescription
ImageSliderBehaviorSettingsBase.VirtualPagingItemsPerRequestSpecifies the minimum number of items the Image Slider loads when a user clicks the navigation button.
ASPxClientImageSlider.ItemLoadedOnCallbackFires for each Image Slider item that is loaded on a callback (when virtual paging mode is enabled).

Online Demo

ASPxImageSlider - Virtual Paging

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

API MemberDescription
ASPxClientImageSlider.GetActiveItem/ASPxClientImageSlider.SetActiveItemGet and set the active item.
ASPxClientImageSlider.GetActiveItemIndex/ASPxClientImageSlider.SetActiveItemIndexGet and set the active item index.
ASPxClientImageSlider.GetItem/ASPxClientImageSlider.GetItemByNameGet an item with the specified index/name.
ASPxClientImageSlider.GetItemCountGets the number of items.
ASPxClientImageSlider.GetLoadedItemsGets the loaded items.
ASPxClientImageSlider.ActiveItemChangedOccurs after the active image displayed within the image area changes.
ASPxClientImageSlider.ItemClickFires after an end user clicks an item within the image area.