ImageSlider: A New Touch-Enabled ASP.NET Image Slider and Gallery Control

ASP.NET Team Blog
03 December 2012

Check out the touch-enabled and slick new ASP.NET Image Slider control:

New for v2012.2 - An introduction to the ASPxImageSlider from DevExpress

The new Image Slider control, called ASPxImageSlider, is available for ASP.NET WebForms as part of the v2012.2 release.

Use the Image Slider control to display images and navigate among them. The control supports three different ways to get images: either binding 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 control's performance.

And it has these great features built-in and ready-to-use in a snap:

 

Touch-Enabled

The Image Slider control supports touch for all iOS and Android (v3.0+) tablet browsers. In fact, most of the DevExpress ASP.NET controls support touch.

And now they also fully support Internet Explorer 10 for Windows 8 device(s) and desktop browsers.

 

Swipe Gesture

When you see an image slider on a touch device, it is natural to want to swipe it with your fingers. After all, that’s what innumerable websites and mobile apps have taught us. And the Image Slider control doesn’t disappoint: you can use the swipe gesture to flip among the images – it’s built right-in and feels completely natural and native. 

 

Animations

A good animation when switching the images helps notify your end-users that something is changing without being too jarring. The Image Slider control has two great smooth animations built-in for the image switching action in both the Image and Navigation areas. Choose from Fade, Slide, or None if you don't want any animations.

 

Try it online now

Click this link below in either your desktop or tablet browser to experience the new Image Slider control:

Image Slider online demo

 

3 Ways To Data Bind

The Image Slider can be populated with images using three different methods:
1.    Binding the control to a Data Source
2.    Pointing the control to an image folder on your webserver
3.    Creating each item manually at run-time
The three possibilities give you the flexibility to use the approach that works best for your scenario.

 

Client-Side Features

Like other DevExpress ASP.NET controls, the Image Slider control gives you a full client-side API. Using this and, say, an ASPxTimer, you can easily produce an automatic slide show that changes images on a set interval.

 

Flexible Navigation & Image Settings

Finally, take a look at the extensive control you have over all the many different items in the Image Slider control:

Image Area Settings

  • ShowItemText. This option specifies whether item text is displayed in front of the image area.
  • 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.
  • NavigationButtonsVisibility. Specifies the visibility mode of image area navigation button.

Navigation Bar Settings

  • 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.

Behavior Settings

  • EnablePagingGestures. This option specifies whether an end-user can switch pages with a swipe gesture.
  • EnablePagingByClick. This option specifies whether paging by click is enabled.
  • ImageLoadMode. This option specifies the image loading mode.

Appearance

  • ShowNavigationBar. This option specifies the navigation bar visibility

 

The Image Slider control is available now in the DXperience v2012.2 release. Download it, deploy it with your ASP.NET sites, and then drop me a line below with your thoughts. Thanks!

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.