Flexslider slide white space

Question

Я использую Flexslider и сталкиваюсь с какой-то странной проблемой: каждый слайд сдвинут вправо, с частью белого пространства с левой стороны каждого слайда.

Когда я пытаюсь проверить DOM, я считаю, что временное исправление либо удалить float: left или margin-right: -100% это в инлайн стиле li «s - НО он ломает скольжение впоследствии. Случается, что когда вы нажимаете стрелку для следующего слайда, он сдвигает первый, показывает второй, а затем скрывает первый.

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

Обратите внимание, что у меня нет этой проблемы при разрешении 1920x1080, но на нижнем - 1024x768, например.

В чем может быть проблема? Также, вот ссылка на живую демонстрацию: http://goo.gl/RGS4O

Answer 1

Я добавил в flexslider.resize() функции в стартовом варианте, и он отлично работает.

$('.flexslider').flexslider({ 
    start: function(slider){ 
    $('body').removeClass('loading'); 
     $('.flexslider').resize(); 
    } 
}); 

Answer 2

В некоторых проектах в последнее время я иногда получить некоторые проблемы с галереей изображений FlexSlider на моем веб-страницу, добавив некоторые странные дополнительные белые поля. (Как 50-100 пикселей или около того свободного пространства) либо на всем левом, либо на всей правой стороне.

Я закончил тем, что изменил некоторые правила css внутри flexslider.css (в частности, для версии 2.2.0). Я считаю, что это было вызвано тем, как стрелки навигации скрыты и показаны, в частности их CSS.

Я изменил/слиты некоторые CSS для того, как появятся стрелки, делая их постоянными:

.flex-direction-nav .flex-prev { opacity: 1; left: 10px; } 
.flex-direction-nav .flex-next { opacity: 1; right: 10px; text-align: right; } 

я удалил следующую css относительно стрелок с использованием средств массовой информации запрос:

@media screen and (max-width: 860px) { 
    .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} 
    .flex-direction-nav .flex-next { opacity: 1; right: 10px;} 
} 

Я чувствую это проблема белого пространства также хорошо обсуждается здесь. https://drupal.org/node/1695136

Answer 3

Это может быть CSS. Попробуйте добавить max-width: 100%; height: auto на изображения.

Answer 4

$('.flexslider').flexslider({ 
    useCSS: false 
}); 

Добавить эту строку в свою конфигурацию, она будет работать должным образом.