Scrollview button navigator (prev - next)

[Cristiano]

I'd like to add in the right center and left center position of the scrollview container two arrows that help the user to navigate to the next or the previous image.
I tried with two <div> element using position:absolute and background image to have the two arrow in the desired position, but as you can see in the attached file, the arrows will disappear after the first scroll to the right. I need a <div> element overlying with the scrollview container.
Is it possibile to get the desired effect?

Thank you

[Alexander Valchev]

Hello Cristiano,

I am afraid that this functionality is not supported out of the box by the ScrollView widget. By design the user is supposed to navigate between the pages by swiping with finger. This is more sensibly when the application is opened on a mobile device.

If you insist to provide an opportunity for navigation via buttons, as a possible workaround I suggest you to put the previous/next buttons inside the View's header.

For your convenience I prepared a small example: http://jsbin.com/oyijoq/2/edit

Regards,
Alexander Valchev
the Telerik team

[Cristiano]

Hello Alexander,
I need the solution as you saw in my example: I don't need real buttons, I need only the graphic effect of the arrows in that positions, that gives idea to user they can navigate photos.
Is still impossible?

Thank you.

[Alexander Valchev]

Hello Cristiano,

As I said in my previous reply this feature is not supported. You can achieve it, but it will require custom CSS/JavaScript.

By default the ScrollView will take 100% width of its parent container. If you want to put static arrows you should limit the width of the widget and its pages. If you want to move between the pages with the arrows, you can use the touch events API.

This example demonstrates the approach: http://jsbin.com/oyijoq/6/edit

Regards,
Alexander Valchev
the Telerik team