Плагин jQuery Cycle: центрирование фоновых изображений при изменении размера браузера

Question

Плагин jQuery Cycle: центрирование фоновых изображений при изменении размера браузера

0

У меня есть слайд-шоу с использованием плагина jQuery Cycle, изменяющего div с фоновым изображением (изображения очень широкие, а если браузер меньше, они должны быть центрированы и отрезаны).

<div class="banner_images">
    <div style="background-image:url(banners/1.jpg)"></div>
    <div style="background-image:url(banners/2.jpg)"></div>
    <div style="background-image:url(banners/3.jpg)"></div>
</div>

Прежде чем применять Cycle, страница будет вести себя точно так, как предполагалось, когда размер окна браузера будет изменен: http://30daysoffalafel.com/test/index-nojs.html

После применения цикла, когда размер браузера изменяется, фоновое изображение не остается центрированным. Обновление браузера устраняет проблему. http://30daysoffalafel.com/test/

<script>
    $(document).ready(function() {
    $('.banner_images').cycle({
            fx: 'fade',
            pager: '.banner_controls div'
        });
    });
</script>

Любые идеи о том, как изменить поведение, чтобы фон фонового изображения на браузере изменялся таким же образом после применения цикла? Я бы предпочел не добавлять js для обновления при изменении размера окна.

Заранее благодарю вас за любые предложения.

goatlady 10 нояб. 2013, в 13:31

Источник

0

Вы пытались использовать $(window).on('resize', function() { /*...*/ }); ?
sbking 10 нояб. 2013, в 11:46
0

На самом деле, я думаю, что вы могли бы использовать старую версию цикла? Попробуйте цикл 2 , который поддерживает адаптивные слайд-шоу.
sbking 10 нояб. 2013, в 11:53

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Вы пытались использовать $(window).on('resize', function() { /*...*/ }); ?
На самом деле, я думаю, что вы могли бы использовать старую версию цикла? Попробуйте цикл 2 , который поддерживает адаптивные слайд-шоу.

Manish · Accepted Answer · 2013-11-10T10-16-00.000Z

Пытаться

$('.banner_images').cycle({
    fx: 'fade',
    pager: '.banner_controls div',
    fit: 1,
    width: '100%',
    slideResize: true,
    containerResize: false
});

это замечательно, спасибо большое :)