Scrollview button navigator (prev - next)

4 posts, 0 answers
  1. Cristiano
    Cristiano avatar
    13 posts
    Member since:
    Nov 2012

    Posted 14 Feb 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Cristiano
    Cristiano avatar
    13 posts
    Member since:
    Nov 2012

    Posted 19 Feb 2013 Link to this post

    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.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready