0

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.

2
Contributors
1
Reply
16
Views
3 Years
Discussion Span
Last Post by LastMitch
0

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?

@hayatuzair_1

This is a jQuery feature not a CSS issue. Plus it's a design issue you are having not an actual issue.

You have to used an iframes.

Edited by LastMitch

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.