Question

Thanks for helping. I am trying to develop a static carousel (it won’t move, but it acts like one) that stretches across the page no matter what the user’s screen resolution is. In other words, I want the images to tile horizontally and run off the screen (but hidden, so no scrollbar).

Here is the markup:

                <div id="video_carousel_full">

            <?php query_posts( 'post_type=videos');
 if (have_posts()) : while (have_posts()) : the_post();?>

                        <div class="vid_img" style="background: url(<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
    echo wp_get_attachment_url( $attachment_id, 'medium' ); break;
} ?>) no-repeat bottom left;"></div>

             <?php endwhile; endif; ?>

        </div><!-- end video_carousel_full -->

Here is the CSS:

#video_carousel_full {
float: left;
width: 100%;
height: 250px;
background-color: #999;
border-top: 5px solid #ffc600;
border-bottom: 5px solid #ffc600;
overflow: hidden;
}

    .vid_img {
    float: left;
    display: block;
    width: 370px;
    height: 250px;
    clear: none;
    }

Thanks!

Answer 1

Give the holder div a width equal to all it’s children, then make a container with an overflow: hidden CSS style. Then move the div holding the children according to how you want to scroll.