Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • deeppatel 25 posts 95 karma points
    Jun 07, 2017 @ 06:25
    deeppatel
    0

    How to create single page with multiple content and vertical slider

    Hi,

    How to set multiple content with vertical slider same like

    http://www.joseph-fashion.com/en-us/home

    in my home page first content with one image,second content with 2 image and third content with 2 images.

    now i need to set vertical slider like when i click on down arrow it should be scroll into second content,etc..

    please check upper url and suggest me how i can do this type of vertical slider in my home page.

    Thanks

  • Nick Ryan 9 posts 79 karma points
    Jun 07, 2017 @ 12:59
    Nick Ryan
    0

    As nobody else has replied, without going into implementation details, here's a generic implementation...

    You'll need a couple of Document Types, one for the container page (i.e. your home page) and another for each content (section).

    All your container page needs to do is to render whatever containing chrome you need - in the case of your linked page this needs to be nothing more complicated than a

    element that is css position of fixed to ensure that it stays in a fixed location in the viewport, this is your in-page "navigation" menu.

    The output of your page should consist of the fixed navigation element and then each child page (CurrentPage.Children) output sequentially,in html semantics most likely output as an

    container with either a sequential ID attribute (identifier) and containing the content. For extra smarts, have the content rendered using the Template (RenderTemplate function I believe - from memory) as this divorces the container from the rendering of the component pages. While it doesn't have to have a sequentual ID attribute it does make the later JavaScript a little simpler. The links in your in-page navigation menu then become nothing more complicated than "#1", "#2" and so on. At this point the page is fully usable without JavaScript, as this is the correct way to implement such things and will not break SEO - however to add a little swish to the page all you need to do is to apply a JQuery(UI) animation function to override the in-page navigation links to smoothly scroll to the section with the linked ID.

  • deeppatel 25 posts 95 karma points
    Jun 08, 2017 @ 08:27
    deeppatel
    0

    Thanks Nick Ryan i will try to implement with your flow.

Please Sign in or register to post replies

Write your reply to:

Draft