Use the ASP.NET Core ScrollView component to present multiple images in a predefined area. Supports manual scrolling trough the navigation elements as well as automatic scrolling on a set time interval.
This control is part of the Telerik UI for ASP.NET Core suite along with 110+ fully-featured UI components designed to speed up delivery & improve every aspect of your workflow.
Manage each project and plan dev time accordingly using the public product roadmap, regular releases, extensive learning resources and outstanding technical support team.
The ScrollView UI component provides an easy way to present images in a predefined area. Multiple images can be scrolled through by using the navigation elements, or automatically scroll through them on a set time interval.
The ASP.NET Core ScrollView also has a pager visible by default in case the user needs to see how many elements there are for display. You can choose to hide the pager by setting the property to false.
The ScrollView component offers Templates as a feature that lets you customize the content within the ScrollView. There is the HTML template which uses plain HTML and CSS syntax. You can also choose to insert a dynamic template, which will loop through all its items; or you can use the No-Item template when no elements will be displayed in the ScrollView.
Binding to a DataSource
The ASP.NET Core ScrollView can be bound to local data, appropriate for smaller sets or to remote data source which is useful in cases of larger data sets. Check out our demo on DataSource Binding.
HTML and Tag Helpers
You can configure the UI component and handle events through an HTML or a Tag Helper, as Telerik UI for ASP.NET Core offers both approaches to declare UI components. Based on preference, technology background or team development practice, you can choose how to implement the ASP.NET Core ScrollView control by using HTML-like syntax.
The ScrollView control makes use of arrow keys to allow users to switch the current image. In addition, the pager itself is focusable and by using a combination of the arrow keys and Space/Enter customers can also directly go to a given image, without having to scroll sequentially multiple times.