Okay so I received a request from a client who wanted me to make him an HTML website, but something new.
All the pages would be in the same index.html file, and every page would slide horizontally.
What he wants is: www.goldmansachs.com
As you can see, the main document has 4 pages, and they all slide horizontally.
I tried to achieve this with the following code:
HTML
<div id="content">
<div class="pages">
<div id="page1">
<div class="header"></div> <!--divs inside would depend on the content -->
</div>
<div id="page2">
<div class="header"></div > <!--divs inside would depend on the content -->
<div class="inner-content"></div>
</div>
<div id="page3">
<div class="header"></div> <!--divs inside would depend on the content -->
</div>
<div id="page4">
<div class="header"></div> <!--divs inside would depend on the content -->
</div>
</div>
</div>
CSS
#content {
width:400px;
height: 370px;
overflow: hidden;
border-width: 2px;
border-color: blue;
border-style: solid;
}
#pages {
width: 1604px;
height: 370px;
}
.page {
width:401px;
height:370px;
float: left;
}
#page1 { background: pink; }
#page2 { background: brown; }
#page3 { background: green; }
#page4 { background: red; }
.header {
width: 300px;
height: 185px;
border: lightgreen 2px solid;
}
.inner-content {
width: 150px;
height: 150px;
border: lightblue 2px solid;
float: left;
}
I was able to get the slider working as a regular carousel slider. But what i wanted to achieve was that the inner div's would slide on their own and now all together.
The following is something I was able to accomplish, http://jsfiddle.net/tZVu6/
But as you can clearly see, I used ScrollTo.JS and well, it did not work. Other than that I do not know how to slide the divs individually like in the demo link above
I'm extremely confused here, and cant seem to get this one done, does anyone know how I would be able to achieve this? Can anyone provide me with the jQuery code or anything?
Thanks in advance.
