bxslider изображение слишком велико, когда страница первая загрузка

Question

Я использую bxslider, и когда ползунок загружает изображения, содержимое загружается в полном размере одновременно, что делает веб-сайт странным. В слайдере около 5 изображений, и когда страница загружается/обновляется, все они отображаются в полном размере до изменения размера.

Ширина установлена ​​на 100%, если я контролирую размер ширины & Высота в приведенном ниже коде ничего не будет выглядеть в мобильных устройствах и планшетах, поэтому размер должен быть адаптивным для всех экранов.

Это код, используемый в настоящее время:

.bx-wrapper { 
    position: relative; 
    margin: 0 auto 60px; 
    padding: 0; 
    *zoom: 1; 
} 
.bx-wrapper img { 
    max-width: 100%; 
     /* display: block; */ 
} 

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

Благодаря

Answer 1

Вы можете использовать bxSlider's preloadImages option, чтобы загрузить все изображения слайдера перед обработкой бегунка:

$('.bxslider').bxSlider({ 
    preloadImages: 'all' 
}); 

(изменить .bxslider к соответствующему классу экземпляра вашего слайдера ...)