Click here to Skip to main content
13,589,923 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


19 bookmarked
Posted 4 Jun 2014
Licenced CPOL

Image Slideshow Control

, 4 Jun 2014
Rate this:
Please Sign up or sign in to vote.
A Windows Forms control to view images in a slide show with captions.


As a web developer I regularly use various image slider plugins to rotate images. With a wide range of plugins to choose from, there is never a need to develop one of my self. However when working on a recent Windows Forms application, I was unable to find a similar control or at least with some of the functionality I wanted. Not wanting to spend a great deal of time searching, I decided to develop my own.

How The Control Works

The ImageSlider control inherits from the Panel control and its OnPaint method has been overwritten so that it can draw an image on the Panel's surface. Images and captions are maintain internally in a List collection of type string and Image. Using a List collection, makes it easy to access an element using an index. The ImageSlider navigation buttons as seen in the screenshot above, simply increment or decrement an internal index. Each time a navigation button is clicked, the Invalidate() method of the Panel is called, which executes the OnPaint() method. The OnPaint method, uses the new index value to look-up the image path and caption from its respective collection and loads the new image and caption.

Additionally, the OnPaint() method is responsible for animating the caption text using a Timer. The timer is started when a navigation button is clicked and disposed of when the animation finishes.

Below is a list of methods and properties.


  • CaptionHeight - Sets the height of the caption area.
  • CaptionTextLeft - Sets the left position of the caption text relative to the caption area.
  • CaptionBackgrounColor - Sets the caption background color.
  • CaptionOpacity - Sets the caption background opacity.
  • CaptionAnimationSpeed - Sets the scroll speed of the caption text.
  • Animation - Boolean value to turn animation on or off.
  • LeftButton - Returns the left navigation button, so that properties of the button can be configured.
  • RightButton - Returns the right navigation button, so that properties of the button can be configured.


  • AddImage(string path)
  • AddImage(string path, string caption)
  • AddImage(string path, string caption, Color captionBackgroundColor)
  • AddImage(Image path)
  • AddImage(Image path, string caption)
  • AddImage(Image path, string caption, Color captionBackgroundColor)

Using The Code

Create a new instance of the ImageSlider control. Use the AddImage method to add images to the ImageSlider. The AddImage() method has three overloads. You can add an image without a caption or you can set a caption for an image. The third argument allows you to set the background color for the caption area.

imageSlider1.AddImage("Chrysanthemum.jpg", "A caption for the image goes here", Color.Maroon);  
imageSlider1.AddImage("Desert.jpg", "What an amazing photo.", Color.Gold);  
imageSlider1.AddImage("Hydrangeas.jpg", "For me?...blush blush", Color.LimeGreen);  
imageSlider1.AddImage("Jellyfish.jpg", "So... what sort of fish are you again?", Color.Orange);  
imageSlider1.AddImage("Koala.jpg", "Will you be my friend?", Color.Gray);  
imageSlider1.AddImage("Lighthouse.jpg", "Must be a great view from up there");  
imageSlider1.AddImage("Penguins.jpg", "Fish anyone?", Color.Navy);  
imageSlider1.AddImage(Image.FromFile("Tulips.jpg"), "You cant go wrong with tulips", Color.LightSkyBlue); 

This brings me to the end of this article. Please feel free to leave your comments and suggestions. You can follow me at


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


About the Author

Syed M Hussain
Web Developer
United Kingdom United Kingdom
No Biography provided

You may also be interested in...


Comments and Discussions

Questionmy vote of 5 Pin
vinod.jangle29-Mar-17 10:55
membervinod.jangle29-Mar-17 10:55 
QuestionBeautiful Post. THANX. Pin
Bhavesh Patel30-Jul-15 23:17
memberBhavesh Patel30-Jul-15 23:17 
QuestionBeautiful!!!! Pin
memberRIVASBROTHERS9-Apr-15 13:36 
QuestionHaw do I animating images similar capture texts ? Pin
Eng Ahmadi6-Jun-14 19:19
memberEng Ahmadi6-Jun-14 19:19 
AnswerRe: Haw do I animating images similar capture texts ? Pin
Syed M Hussain7-Jun-14 1:13
memberSyed M Hussain7-Jun-14 1:13 
GeneralMy vote of 5 Pin
JCahyaatnttearjee5-Jun-14 20:25
professionalJCahyaatnttearjee5-Jun-14 20:25 
GeneralMy vote of 5 Pin
Prasad Khandekar4-Jun-14 23:17
professionalPrasad Khandekar4-Jun-14 23:17 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun4-Jun-14 22:39
memberHumayun Kabir Mamun4-Jun-14 22:39 
QuestionHow to do the same for images from database? Pin
Prasanna Kumar Muduli4-Jun-14 16:45
memberPrasanna Kumar Muduli4-Jun-14 16:45 
AnswerRe: How to do the same for images from database? Pin
Syed M Hussain4-Jun-14 22:20
memberSyed M Hussain4-Jun-14 22:20 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.180618.1 | Last Updated 5 Jun 2014
Article Copyright 2014 by Syed M Hussain
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid