Step Carousel Viewer sliding not right [Archive]

advanto

12-23-2010, 10:27 AM

1) Script Title: Step Carousel Viewer 1.9

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

3) Describe problem: We have a viewer with 5 panels visibles at loading. The configuration is:

autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},

The width of each panel is fixed.

But it doesn't work right: the first slide moves 1 on right but then you can see 4 panels (not 5), the next slide you will see 3 panels, and then 2 and finally 1.

You can see this at: ctnsc.org

Any help would be appreciated.

jscheuer1

12-23-2010, 02:29 PM

First you have two stepcarousel divisions and two belt divisions:

<div id=caixa7in>
<script type="text/javascript">

stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/carrouselLeft.png', -10, 0], rightnav: ['images/carrouselRight.png', 5, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>
<div id="mygallery" class="stepcarousel">
<div class="belt"><div id="mygallery" class="stepcarousel" style="">
<div class="belt">
<div class=panel><img style="padding: 25px 0;" src="http://www.ctnsc.org/Uploads/imgs/ban . . .

Get rid of the second (red) ones. For the HTML code to remain valid (assuming it was valid before), you also have to remove two </div> from the end:

<div class=panel><a href='http://www.advanto.com' target='_blank'><img style="padding: 20px 0;" src="http://www.ctnsc.org/Uploads/imgs/banners_logos_colab/advanto.jpg" border=0 width="150" height="48" alt='advanto'></a></div>
</div>
</div>
</div>
</div>
</div>
</div>

Now we're about done, but the width of the stepcarousel division is wrong. You want 5 panels visible at 187 pixels each, and they each have a right border of 1 pixel. That makes 188 * 5 or 940. For optimal behavior in a case like this, 1 pixel should be added to that. So change the style section as shown:

<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
/*border: 1px solid black;*/
overflow: scroll; /*leave this value alone*/
width: 941px; /*Width of Carousel Viewer itself*/
margin-left: 12px;
height: 100px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absol . . .

That's it!