Nowadays it is really hard to capture users’ attention long enough to present all the information you want to. That’s where Image Sliders come in handy because they enable you to visually summarize content and introduce it to your audience in an interactive and appealing manner. Everybody knows that people respond better and faster to visuals rather than just plain text.
Here at Telerik we are constantly trying to provide you with more and more functionality out-of-the-box, so logically we delivered an image sliding functionality within our new for Q1 2014
1. Choose the right images and place them in a folder
That is the part where you choose what content you want presented in your web application. Then you could just place the ready images in a folder. 2. Bind the control
RadImageGallery provides various ways to bind it to data both on the server-side and the client-side. In this case it is most convenient to use folder binding which requires just specifying the path to the images folder. However, I will use the static items binding so we could observe each item and its respective title and description.
"Sport and fitness"
"There are countless opportunities to join the University sport club. There are sports teams in various fields and all have excellent facilities and friendly competitive spirit."
"Departments and Faculty Librarires"
"Departmental and faculty libraries hold books that support learning and research in subject areas taught at International University, including books from reading lists."
"The Graduate Union"
"There is a student union supported by the University - the Graduate Union. It provides advice, information, resources, and support on all matters of student life."
"Core Lab and Major Facilities"
"Core Labs and Major Facilities are available to support the research of faculty, scientists and graduate students both on campus and with regional and international collaborators."
3. Turn on the Image Slider feature
Another important step is to set the ThumbnailsAreaSettings.Mode to ImageSlider which is required because the control provides multiple ways for presenting the images and supports a wide range of scenarios.
4. Choose a transition animation Last but not least, you could choose one of the many animations that suits your needs best.
That’s not all! Go and take a look at our Image Gallery demos to see numerous ways to visualize images, transition them with animations, apply easings and bind them to databases, binary data, URL’s, folders or on the client-side. I am not here to reveal all of the control secrets but I have to tell you that it has been designed so it could satisfy requirements from advanced scenarios for full blown galleries to Image Sliders and small image areas that provide popup images.
Antonio Stoilkov is passionate about sports and loves to learn new things regardless if it is about the next quantum computer advancement or a new keyboard shortcut.
Subscribe to be the first to get our expert-written articles and tutorials for developers!