Multple jQuery Content Slider on same page

Below is some code that I found on StackOverflow for a simple jQuery content slider.

    // Scroll vars
    var currentPosition = 0;
    var slideWidth = 615;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slide-wrapper').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
        'float' : 'left',
        'width' : slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slid开发者_运维问答eInner').css('width', slideWidth * numberOfSlides);

    // Insert left and right arrow controls in the DOM
    $('.slideshow')
    .append('<span class="control" id="leftControl">Left</span>')
    .append('<span class="control" id="rightControl">Right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control').bind('click', function(){
        // Determine new position
        currentPosition = ($(this).attr('id')=='rightControl')
        ? currentPosition+1 : currentPosition-1;

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });
    });

    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position){
        // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() }
        else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() }
        else{ $('#rightControl').show() }
        }

The corresponding HTML:

                    <div class="slideshow">
                        <div class="slide-wrapper">
                            <div class="slide">
                                <p>Content</p>
                            </div>
                            <div class="slide">
                                <p>Content</p>
                            </div>
                            <div class="slide">
                                <p>Content</p>
                            </div>
                            <div class="slide">
                                <p>Content</p>
                            </div>
                        </div>
                    </div>

However, I need to add another content slider section on the same page (i.e. div class="slideshow2"). Is there an easy way to reuse the same functions instead of duplicating much of the javascript?

---

This should get you started. Had to remove all references to ids and replace them with JavaScript variables. The JSFiddle. Call the function slideme for every 'slideshow':

function slideme(slideNode) {
    // Scroll vars
    var currentPosition = 0;
    var slideWidth = 615;
    var slides = $('.slide', slideNode);
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slide-wrapper', slideNode).css('overflow', 'hidden');

    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position, leftControl, rightControl){
        // Hide left arrow if position is first slide
        if(position===0){ leftControl.hide(); }
        else{ leftControl.show(); }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ rightControl.hide(); }
        else{ rightControl.show(); }
    }


    // Wrap all .slides with #slideInner div

    var slideOuter = slides.wrapAll('<div></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
        'float' : 'left',
        'width' : slideWidth
    });

    var slideInner = slideOuter.parent();
    slideInner.css('width', slideWidth * numberOfSlides);

    // Insert left and right arrow controls in the DOM
    var lc = $('<span class="control">Left</span>');
    $(slideNode).append(lc);
    lc.bind('click', function() {
        currentPosition -= 1;
        manageControls(currentPosition, lc, rc);
        // Move slideInner using margin-left
        slideInner.animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });    
    });
                                                                                var rc = $('<span class="control">Right</span>');
    $(slideNode).append(rc);
    rc.bind('click', function() {
        currentPosition += 1;
        manageControls(currentPosition, lc, rc);
        // Move slideInner using margin-left
        slideInner.animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });
    });  

    // Hide left arrow control on first load
    manageControls(currentPosition, lc, rc);
}

Assuming you created two slideshows with the ids 'slideshow1' and 'slideshow2', this will set them up:

slideme($("#slideshow1"));
slideme($("#slideshow2"));