jQuery Scrollable Center Активная рамка

Question

Я использую плагин jQuery Tools Scrollable.Я пытаюсь сделать так, чтобы активный кадр был в центре экрана.

У меня есть прокручиваемая оболочка на 100% ширины, и она прекрасно работает, но активный кадр выровнен по левому краю,Я хочу, чтобы активный кадр был в центре.Для лучшего объяснения см. Этот макет того, чего я пытаюсь достичь.

К вашему сведению: Это моя структура:

<div class="scrollable">
    <div class="prev browse left disabled"></div>

    <div class="items">
        <div class="pane">
            Content
        </div>
        <div class="pane">
            Content
        </div>
    </div>

    <div class="next browse left"></div>
</div> 

Спасибо!

Answer 1

Код от Calvin работает, но опять же может быть лучше, если вы укажете приблизительную ширину контента, где вы хотите показывать фотографии.потому что, он делает элементы в центре, если мы не дадим левое / правое поле.

.scrollable {
    background-color: black;
    width: 100%;
}
.items {
    margin: 0 auto;
    width: 400px;
}

Answer 2

Я понял это.Вы не можете использовать margin: 0 auto для .items, потому что .items слишком широк.Умеш попытался решить эту проблему, указав ширину .items, но это не динамично.Кроме того, jQuery Tools Scrollable все равно пытается расположить активный кадр влево.

Вот что я сделал.

Я установил прокручиваемость как 100% ширину браузера..Pane имеет ширину 800 пикселей все время.

Затем я написал этот JavaScript:

// Get window width
var winWidth = jQuery(window).width();

// winWidth divided by 2, subtract half the width of .pane
var itemsMargin = (winWidth/2)-400;

// Resize the homepage scrollable panes
jQuery('.scrollable .items').css('margin-left', itemsMargin+'px');

В центре экрана всегда находится активная панель .pane.Затем я настраиваю обратный вызов .resize (), чтобы пересчитать левое поле при изменении размера обзора.Отлично работает!

Answer 3

Исходя из моего предположения, вы можете попробовать поместить это для CSS:

.items { margin:0 auto; }