Results 1 to 3 of 3

Thread: How to make step carousel wrap around and then stop on slide #1

  1. #1
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to make step carousel wrap around and then stop on slide #1

    So I am using your awesome example of the dynamic carousel and I am trying to configure the javascript to allow the it to scroll through once but then start over and stop on slide #1: here is the website: http://www.dynamicdrive.com/dynamici...epcarousel.htm

    I have tries to change the autostep parameter from true to false but that either loops forever or stops on the last one.

    I tried to use the:
    onslide:function()

    but I cannot figure out the syntax to determine how the slider knows what the last slide is.

    Can anyone help me with this?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,980
    Thanks
    43
    Thanked 3,196 Times in 3,158 Posts
    Blog Entries
    12

    Default

    For the on page part of the script:

    Code:
    <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:3000},
    	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:false},
    	defaultbuttons: {enable: true, moveby: 1, leftnav: ['10/leftnav.gif', -5, 80], rightnav: ['10/rightnav.gif', -20, 80]},
    	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']
    	onslide: function(){
    		var id = 'mygallery', car = stepcarousel.configholder[id];
    		if(car.currentpanel == car.lastvisiblepanel && !car.hasstopped){ //if we're at the end
    			setTimeout(function(){stepcarousel.stepTo(id, 1);}, car.autostep.pause); //step one more time
    			car.onslide = function(){}; //and stop checking
    		}
    	}
    })
    
    </script>
    Don't miss the added comma (red) on the contenttype line.


    And . . .

    Using a text only editor like NotePad, in the stepcarousel.js script change this:

    Code:
    	stopautostep:function(config){
    		clearTimeout(config.steptimer)
    	},
    to:

    Code:
    	stopautostep:function(config){
    		clearTimeout(config.steptimer);
    		config.hasstopped = true;
    	},
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow thank you so much, that would have taken me forever to figure that code. I do know some javascripting but you have completely went beyond. Thank you so much

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
  •