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?

Answer 1

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')