PDA

View Full Version : Step Carousel - image centering and scrolling problem



bomberman
12-22-2010, 12:34 PM
1) Script Title: Step Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

Hello all! This is my first posting on Dynamic Drive forums. Im having a sticky problem with step carousel viewer. I have used it before and have had no problems getting the script to run but am really stuck on this point.

The issue is this:

I have a carousel with the viewer set at 100% of the browser width.

I am trying to position the first image so it is always centered on the page, regardless of viewer browser size. I then need the images to still be visible when they scroll to the left.

I am able to center the gallery but can't manage to maintain the visibility of the image as it slides left (as it gets cut off by the edge of the carousel viewer). I've tried overflow:visible and playing around with negative margins but cant get this to work.

Hope this makes sense! anyone with any suggestions?

(the images i am using are 800px width X 400px height.
The css is as follows:





.stepcarousel
{
position:relative;
top:0%;
left:50%;
margin-left:-400px;
height: 400px;
width:100%; /*Width of Carousel Viewer itself*/
padding:0px;
border: 1px solid pink;
overflow:visible;
z-index:40;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
top: 0%;
margin-left:0%;
width:auto;
height:400px;
border:1px solid green;
overflow:visible;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: ;
margin-right:12%; /*margin around each panel*/\
left:50%;
width: 800px;
border: 1px solid black; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

Shaun
11-02-2011, 05:30 PM
Hi, did you ever find a solution to this problem?

I'm trying thee exact same thing, you can't fix the panels because the carousel makes use of the left prop...

i.e. { left: 50%; margin-left: -(image_width / 2) px; }

and you can't fix the carousel (or the belt) because of the problem you've already identified...

Is it even possible or should I just start hunting down another carousel?

Any ideas?