﻿

        // small image belt
        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: false, moveby: 2, pause: 1000 },
            panelbehavior: { speed: 500, wraparound: true, wrapbehavior: 'slide', persist: true },
            defaultbuttons: { enable: true, moveby: 1, leftnav: ['images/rightarrow.png', -5, 13], rightnav: ['images/leftarrow.png', -15, 13] },
            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']

            onpanelclick: function (target) {
                stepcarousel.stepTo('galleryImage', target.id);
            }
        })

        //bigimage
        stepcarousel.setup({
            galleryid: 'galleryImage', //id of carousel DIV
            beltclass: 'bigbelt', //class of inner "belt" DIV containing all the panel DIVs
            panelclass: 'bigpanel', //class of panel DIVs each holding content
            autostep: { enable: true, moveby: 1, pause: 2000 },
            panelbehavior: { speed: 500, wraparound: true, wrapbehavior: 'slide', persist: true },
            defaultbuttons: { enable: false, moveby: 1, leftnav: ['images/rightarrow.jpg', -5, 13], rightnav: ['images/leftarrow.jpg', -15, 13] },
            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']
        })
        
   
