Have a single page vertical sectioned website, at the same time, have some sections(div) have horizontal section (div) sliders

Question

Please see this website as an example The landing page, has four sliders, which are each separate divs respectively, but at the same time the whole webpage has separate vertical sections. I know how to do the vertical bit, standard CSS and HTML. however, how do I go about sliding between horizontal divs on one section?

can you not use the jquery slideshow component ? something like jcarousal as in http://www.holytour.in ? — Chandra Sekhar Walajapet, Oct 06 '12 at 02:45
well the animation you see there can be slide horizontal or slide vertical too. — Chandra Sekhar Walajapet, Oct 06 '12 at 02:46

score 0 · Accepted Answer · answered Oct 06 '12 at 04:17

use a div with 100% width and overflow:hidden and position: relative (let's call it 'section')

inside that div put another div with width 400% and position: absolute (let's call it 'wrapper')

then put the 4 slides inside that div with a width of 25% and float: left

then you can scroll the slides by changing the left value of 'wrapper' to move it inside the 'section'

if you set left: 0% you are on the first slide, -25% and you are on the second, -50% and you are on the third, -75% and you are on the forth

you can even animate that $('#wrapper').animate({left: '-25%'},'normal')

this sounds like a decent solution. Ishall give it a try – Muhammed Bhikha Oct 06 '12 at 07:53 — Muhammed Bhikha, Oct 06 '12 at 07:53

Have a single page vertical sectioned website, at the same time, have some sections(div) have horizontal section (div) sliders

1 Answers1