响应式jquery幻灯片:除非我刷新浏览器,否则无法查看大小更改

时间:2013-09-05 15:50:29

标签: javascript jquery

我已经改编了来自Jacob Gube(sixrevisions.com)的jquery幻灯片,并添加了一些代码以使其可以访问键盘。我也试图让它响应。它运作良好而不是一件事:当我更改浏览器的窗口大小时,我必须刷新浏览器才能看到幻灯片的图片正确调整大小。

我试过window.resize但没有成功。

这是我的Jquery代码:

$(document).ready(function () {
    var currentPosition = 0;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var imgWidth = $('.slide img').width();

    $('#carrousel_conteneur').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',
            'max-width': imgWidth
        });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css({ 'width': imgWidth * numberOfSlides, });

    // Insert controls in the DOM
    $('#carrousel')
        .prepend('<input type="submit" class="boutons" id="precedent" value="Image précédente" aria-live="polite" />')
        .append('<input type="submit" class="boutons" id="suivant" value="Image suivante" aria-live="polite"/>');

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

    // Create event listeners for .controles clicks
    $('.boutons')
        .bind('click', function () {

            // Determine new position
            currentPosition = ($(this).attr('id') == 'suivant') ? currentPosition + 1 : currentPosition - 1;

            // Hide / show controls
            manageControls(currentPosition);

            // Move slideInner using margin-left
            $('#slideInner').animate({
                'marginLeft': imgWidth * (-currentPosition)
            });
        });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position) {
        // Hide left arrow if position is first slide
        if (position == 0) {
            $('#precedent').hide()
        } else {
            $('#precedent').show()
        }

        // Hide right arrow if position is last slide
        if (position == numberOfSlides - 1) {
            $('#suivant').hide()
        } else {
            $('#suivant').show()
        }
    }
});

提前谢谢!

0 个答案:

没有答案