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
Apply Changes


The ImageSlider is an ASP.NET MVC extension used to display images and navigate among them. The extension supports three different ways to data bind: to a data source, loading images from a specified folder, or creating image items manually. Image thumbnails are created for you automatically or you can manually create them and increase the extension's performance.

The ImageSlider extension consists of the image area and navigation bar. The both elements can be fully customized via 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 provide the presets properties that you can further customize using the options below the extension.

Image Area Settings (accessed by the SettingsImageArea property)

  • ImageSizeMode. Allows you to specify how an image is fit to 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. The direction of image sliding.
  • ItemTextVisibility. Specifies the visibility mode of the item text area.
  • NavigationButtonsVisibility. Specifies the visibility mode of image area navigation button.
  • EnableLoopNavigation. Specifies whether or not the navigation order in either direction repeats in a loop.

Navigation Bar Settings (accessed by the SettingsNavigationBar property)

  • Position. This property allows to specify the position of navigation bar relative to image area.
  • Mode. Specifies the appearance of navigation bar items: dots or image thumbnails.
  • ThumbnailsModeNavigationButtonVisibility. Specifies the visibility mode 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 (accessed by the SettingsBehavior property)

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
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxImageAndDataNavigationDemos

Your Next Great MVC App Starts Here

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

DevExpress MVC Extensions 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.