Results 1 to 3 of 3

Thread: Step Carousel Viewer sliding not right

  1. #1
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer sliding not right

    1) Script Title: Step Carousel Viewer 1.9

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

    3) Describe problem: We have a viewer with 5 panels visibles at loading. The configuration is:
    Code:
    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.
    Last edited by jscheuer1; 12-25-2010 at 04:41 AM. Reason: remove hotlink

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    First you have two stepcarousel divisions and two belt divisions:

    Code:
    	<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:

    Code:
    <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:

    Code:
    <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!
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    advanto (12-24-2010)

  4. #3
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You are wonderful!

    I've haven't noticed the two mygallery divs.

    Now it works perfect!

    Thanks.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •