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"));