Click here to Skip to main content
15,884,353 members
Articles / Web Development / ASP.NET
Article

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

Rate me:
Please Sign up or sign in to vote.
4.00/5 (1 vote)
14 Jan 2013CPOL3 min read 19.5K   4   6
ImageSlider: A New Touch-Enabled ASP.NET Image Slider and Gallery Control

This article is for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers

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

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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
Mehul Harry is the web product manager at Developer Express where he works with and blogs about ASP.NET, HTML 5, and JavaScript. He has produced more than 200 technical videos and interviews on Windows development and developer culture.

He's also a fan of great scotch, family time, travel, and photography.

Check out his other writing and work:
Personal blog: http://www.mehulharry.com/
DevExpress work blog: http://devexpress.com/mehul

Comments and Discussions

 
QuestionASPxImageSlider Pin
mufeed k17-Sep-14 20:35
mufeed k17-Sep-14 20:35 
AnswerRe: ASPxImageSlider Pin
Mehul_Harry18-Sep-14 2:24
Mehul_Harry18-Sep-14 2:24 
GeneralRe: ASPxImageSlider Pin
thetime110214-Oct-14 23:02
thetime110214-Oct-14 23:02 
GeneralRe: ASPxImageSlider Pin
mufeed k23-Oct-14 18:51
mufeed k23-Oct-14 18:51 
GeneralRe: ASPxImageSlider Pin
Mehul_Harry24-Oct-14 8:37
Mehul_Harry24-Oct-14 8:37 
GeneralMy vote of 4 Pin
ishihidul14-Jan-13 11:56
ishihidul14-Jan-13 11:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.