Telerik blogs
mobile support responsiveness

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

ASP.NET AJAX Image Gallery control. Adding stunning Image Sliders to your apps is now a matter of seconds: It is easy as placing couple of images in a folder, writing descriptions for them and choosing one of the many ways to populate the control with data. Let’s see how to do it.



Easy Steps to Set Up an Image Slider

Let’s go through the easy steps for introducing an interactive Image Slider functionality in your website:

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.

<Items>
        <telerik:ImageGalleryItem ImageUrl="~/ImageSliderImages/SportAndFitness.jpg" Title="Sport and fitness"
            Description="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." />
  
        <telerik:ImageGalleryItem ImageUrl="~/ImageSliderImages/DepartmentsandFacultyLibraries.jpg" Title="Departments and Faculty Librarires"
            Description="Departmental and faculty libraries hold books that support learning and research in subject areas taught at International University, including books from reading lists." />
  
        <telerik:ImageGalleryItem ImageUrl="~/ImageSliderImages/TheGraduateUnion.jpg" Title="The Graduate Union"
            Description="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." />
  
        <telerik:ImageGalleryItem ImageUrl="~/ImageSliderImages/CoreLabsandMajorFacilities.jpg" Title="Core Lab and Major Facilities"
            Description="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." />
    </Items>

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.

<telerik:RadImageGallery ID="RadImageGallery1" runat="server">
 
    <ThumbnailsAreaSettings Mode="ImageSlider" />
 
    <ToolbarSettings Position="None" />
 
</telerik:RadImageGallery>


4. Choose a transition animation
Last but not least, you could choose one of the many animations that suits your needs best.

<ClientSettings>
    <AnimationSettings>
        <NextImagesAnimation Type="Blocks" />
        <PrevImagesAnimation Type="Blocks" />
    </AnimationSettings>
</ClientSettings>

Final Result:

AJAX ImageGallery Slider

Liked What You Saw?

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.


mobile support responsiveness

About the Author

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.

Related Posts

Comments

Comments are disabled in preview mode.