Member Avatar for hayatuzair_1

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
  • 314 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

A few practical points to get this working without iframes (and to respond to : iframes are unnecessary here and make layout, SEO and accessibility harder).

Main problems to check first: HTML/CSS selector mismatches (class vs id), fixed widths/floats that force every child to move as one block, and not toggling a per-page "active" state when a page becomes visible. Use a single track for pages and animate that with CSS transforms; then trigger per-page animations by adding/removing an .active class.

Example layout + per-page animation pattern (adapt to your markup):

.pages { display: flex; transition: transform .6s ease; will-change: transform; }
.page  { min-width: 100%; box-sizing: border-box; }

/* child elements start off-screen */
.page .header { transform: translateX(-30px); opacity: 0; transition: transform .45s ease, opacity .45s ease; }
/* when the page is active they slide in */
.page.active .header { transform: translateX(0); opacity: 1; }

Simple JS to move the track and toggle .active:

function goTo(index){
  var track = document.querySelector('.pages');
  track.style.transform = 'translateX(' + (-index * 100) + '%)';
  document.querySelectorAll('.page').forEach(function(p,i){
    p.classList.toggle('active', i === index);
  });
}

Troubleshooting tips: confirm your HTML selectors match your CSS, remove floats on the sliding track (use flex or inline-block pages), prefer transform over left for smoother GPU-accelerated animations, and use transition-delay or staggered class additions for sequential inner animations. For accessibility, move keyboard focus into the new page and set aria-hidden on off-screen pages. This pattern reproduces the Goldman-style slide effect while keeping markup simple and performant.

Member Avatar for Member #949455

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?

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 Member #949455
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.