Множественный jQuery Content Slider на той же странице

Question

Ниже приведен код, который я нашел в StackOverflow для простого слайдера контента jQuery.

    // 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
    $('#slideInner').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() }
        }

Соответствующий 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>

Однако мне нужно добавить еще один слайдер контентараздел на той же странице (т.е. div class = "slideshow2").Есть ли простой способ повторно использовать те же функции вместо дублирования большей части JavaScript?

Answer 1

Это должно помочь вам начать.Пришлось удалить все ссылки на идентификаторы и заменить их переменными JavaScript. JSFiddle .Вызовите функцию slideme для каждого «слайд-шоу»:

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

Если вы создали два слайд-шоу с идентификаторами «слайд-шоу1» и «слайд-шоу2», это установит их:

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