Step Carousel - Behaves as though extra blank panel?

[daniel_patten]

1) Script Title: Step Crousel Viewer 1.9

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem: It appears to behave as though there were an additional blank panel at the end of the rotation list.

Example link here: http://www.magicinferno.com/files/carousel.html

I've used a step carousel for image galleries 2 times before with no issue. I'm not sure what's causing this issue now as I have removed all outside factors I could think of by placing it on a vacant html file.

I'm using a past client folder and some of their image files just to demonstrate the issue I'm having.

Can anyone find what is causing the "ghost panel" to appear?


Thanks for reading.

[jscheuer1]

You probably just need another panel. However, you have two versions of jQuery on the page and another script (crawler). These could be causing problems. But I doubt it. The way Step Carousel works is that when it gets to the end, if there aren't enough panels, it shows a blank one.

This situation arises because you have:

.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 628px; /*Width of Carousel Viewer itself*/
height: 100px; /*Height should enough to fit largest content's height*/
}

which is twice the width of each:

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 314px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

and an odd number of panels.

[ddadmin]

Try increasing the width of your step gallery ever so slightly, such as by 1px:

.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 629px; /*Width of Carousel Viewer itself*/
height: 100px; /*Height should enough to fit largest content's height*/
}

The blank space you're seeing is due to the script stopping at the very last panel, instead of the 2nd last. This happens when the script determines that if it stops at the 2nd last, the final panel will be partially clipped, so instead, it stops at the last panel instead. By increasing the width of the gallery slightly, the last panel will no longer be clipped when the Carousel stops at the 2nd to last panel, so the script just stops there before wrapping.

[daniel_patten]

So, even if I wanted to show 2 panels in the field at once and move by 2 panels each time with an even number of panels present it will still show a blank space at the end because I have a visible range of 2 panels?

working example site: http://rpg.epicgamesonline.com/

This website uses the same step carousel viewer and has an odd number of panels with a visible range for 3 panels at a time and still doesn't show the blank extra panel at the end.

I'm wondering how this works while my example doesn't.

I've since removed the older jquery src and evened up the total panels just to see if this helped (reducing the visible range does work, but I'd hoped to show at least 2 panels at a time as demonstrated in the original script demo page).

[ddadmin]

Did you try my suggestion?

[daniel_patten]

Try increasing the width of your step gallery ever so slightly, such as by 1px:

.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 629px; /*Width of Carousel Viewer itself*/
height: 100px; /*Height should enough to fit largest content's height*/
}

The blank space you're seeing is due to the script stopping at the very last panel, instead of the 2nd last. This happens when the script determines that if it stops at the 2nd last, the final panel will be partially clipped, so instead, it stops at the last panel instead. By increasing the width of the gallery slightly, the last panel will no longer be clipped when the Carousel stops at the 2nd to last panel, so the script just stops there before wrapping.

You're telling me I've been foiled by a single pixel space?

...

You're right.

I felt as though I had tested the width +/- first, but apparently I had imagined that. Thanks for the pixel (solution).

Although, I wish the it had been a bit more complex for the sake of my now deflated pride.