Home/ Questions/Q 800265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T23:16:01+00:00

I am trying to implement a type of slider using jquery. However this question

  • 0

I am trying to implement a type of slider using jquery. However this question is about the CSS involved in trying to achieve the functionality.

My site design occupies a central column of width 960px. Within this layout there is a central element, that I wish to slide right, on click of a “next” button, and at the same time, another element of the same class slides in from the left to occupy the space vacated. I have drawn a diagram of what I am trying to achieve.alt text http://img714.imageshack.us/img714/692/61886077.png

In this diagram the red blocks are the element I want to slide in and out, it is grouped by a div which moves left to produce the effect using jQuery

I have 2 main questions:

  1. How do I get the correct margin values, given that the browser window width can vary and that all elements that are not the current item should be offscreen?

2.If the user were to resize the margins could be dynamically altered based on the values returned using the jQuery resize() event. Or is there a neater quicker better way of doing it using pure CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Create a div in the middle, that have margin: auto so that it will always be centered.
    I’m guessing your (red) boxes will always be the same size? Have this centered div with this size, and overflow: hidden. Then inside this div, create the three other divs, which will be moved inside that fixed div size and not the browser window size.

    Something like:

    <body style="text-align: center">
    <div id="container" style="overflow: hidden; width: 960px; height: 600px; margin: auto; position: relative">
     <div id="slider" style="width: 9999px; position: absolute">
      <div id="first" style="width: 960px; float left;"></div>
      <div id="second" ...></div>
      <div id="third" ...></div>
     </div>
    </div>
</body>

    So you move that slider div inside the container setting left: 960px times the number of boxes

    • 0