Home/ Questions/Q 8369911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:46:43+00:00

So, I’m trying to build a two dimensional content slider and I’m having problems

  • 0

So, I’m trying to build a two dimensional content slider and I’m having problems implementing it. I’m using jQuery.

The basic idea for the slider markup is:

<div id="contentSlider">
    <div class="contentBlock">
        <div class="pictures">
            <ul>
                <li>
                    <img src="img1.jpg" />
                </li>
                <li>
                    <img src="img2.jpg" />
                </li>
                <li>
                    <img src="img3.jpg" />
                </li>
            </ul>
            <div class="absPositionedNavUp></div>
            <div class="absPositionedNavDown></div>
        </div>
        <div class="text">
            <p>
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
            </p>
            <p>
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
            </p>
        </div>
    </div>
    <div class="contentBlock">
        ........
    </div>
    <div class="contentBlock">
        ........
    </div>
</div>
<div class="slideAllContentLeft"></div>
<div class="slideAllContentRight"></div>

What I’m trying to do (and I’ve been able to get certain parts working) is:

(1) Have the pictures div slide up and down between images

(2) Have the contentSlider div slide left and right between multiple contentBlock divs

What I have currently is at: http://www.ficreates.com/_SiteDemos/PBL/projects.html

My main issue is with the CSS part of it. How do I get the divs to line up left to right and slide between them? You can see my code currently, which is prob about 60% of the way there.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I solved the problem, and the solution is something like the following:

    Create a container div for the content blocks. It’s width is set by: the jQuery length property (which calculates the total number of content blocks) times the width of a single content block (950px). The container div is then positioned left to right using absolute positioning within the .content_slider div.

    The phantom border was actually a problem with the line-height which was set in my reset.css file (the ul was inheriting “line-height:1;”). I overrode this with “line-height: 0;” and voila, no more 1.5px space between the individual photos.

    • 0