Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Themes
 
Show All Themes
v
...v

Features

v
Image Area Settings
v
v
v
v
v
Navigation Bar Settings
v
v
v
v
v
Behavior Settings
v
v
v
Appearance

The DevExpress ASP.NET Image Slider (ASPxImageSlider) is a data control used to display images and navigate through them. The control supports three different approaches to data binding: binding to a data source, loading images from a specified folder, or creating image items manually. Image thumbnails are created automatically, or you can create them manually and improve the control's performance.

The ASPxImageSlider control consists of an image area and a navigation bar. Both elements can be fully customized from the SettingsImageArea and SettingsNavigationBar properties, respectively.

This demo allows you to set one of the predefined scenarios using the 'Predefined Scenarios' combo box. A scenario provides the following preset properties that you can further customize using the options below.

Image Area Settings

  • EnableLoopNavigation - specifies whether or not the navigation order in either direction repeats in a loop.
  • ImageSizeMode - specifies how an image fits in the image area.
  • AnimationType - contains a value specifying the animation type used to change images. If the slide animation type is used, images can be changed using the swipe gesture.
  • NavigationDirection - specifies the direction of image sliding.
  • ItemTextVisibility - specifies the visibility mode of the item text area.
  • NavigationButtonsVisibility - specifies the visibility mode of the image area navigation button.

Navigation Bar Settings

  • Position - specifies the position of the navigation bar relative to the image area.
  • Mode - specifies the appearance of navigation bar items: dots or image thumbnails.
  • ThumbnailsModeNavigationButtonVisibility - specifies the visibility of navigation buttons within the navigation bar. This property is in effect for Thumbnails mode only.
  • PagingMode - specifies how the navigation bar scrolls when an end-user clicks page navigation buttons.

Behavior Settings

  • AllowMouseWheel - specifies whether or not an end-user is able to slide images using the mouse wheel.
  • EnablePagingGestures - specifies whether or not an end-user can switch pages with a swipe gesture.
  • EnablePagingByClick - specifies whether or not a user can change images by clicking the left or right side of the image area.
  • ImageLoadMode - specifies the image loading mode.
  • ExtremeItemClickMode - specifies the effect produced when an end-user clicks the leftmost or rightmost navigation bar item.

Appearance

Collapse/Expand
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxImageAndDataNavigationDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxImageAndDataNavigationDemos

Your Next Great ASP.NET App Starts Here

Get started today and download your 30-day trial of ASP.NET Controls and Libraries (includes 30 days of free technical support).
All demos ship with full source code and are included in the DevExpress ASP.NET distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress ASP.NET Controls and Libraries ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.