Flexslider 슬라이드 공백

Question

Flexslider를 사용하고 있는데 이상한 문제가 발생합니다. 모든 슬라이드가 각 슬라이드의 왼쪽에 공백 부분이있는 오른쪽으로 이동합니다. 하지만는 이후 슬라이딩 나누기 -

내가 DOM을 검사하려고

, 나는 임시 수정이 float: left 또는 li의 인라인 스타일의 margin-right: -100% 제거 중 하나는 사실을 알게 될 것입니다. 다음 슬라이드에서 화살표를 클릭하면 첫 번째 슬라이드를 아래로 이동하고 두 번째 슬라이드를 표시 한 다음 첫 번째 슬라이드를 숨 깁니다. 내가 인라인 스타일로 어쨌든에 개입하지 않는 경우

는, 슬라이더는 여전히 왼쪽에 공백이 있고, 내가 페이지를 아래로 스크롤 위로 복귀 후 예상대로, 슬라이더는 문제없이, 작동 .

1920x1080 해상도에서는이 문제가 발생하지 않지만 예를 들어 1024x768보다 낮은 해상도에서이 문제가 발생합니다.

무엇이 문제 일 수 있습니까? 또한 라이브 데모 링크는 다음과 같습니다.

Answer 1

시작 옵션에 기능을 추가했으며 정상적으로 작동합니다.

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

Answer 2

최근에 일부 프로젝트에서 요즘 일부 웹 페이지에서 플렉스 슬 라이더 (flexslider) 이미지 갤러리에 몇 가지 이상한 여분의 흰색 여백을 추가하는 문제가 발생합니다. 왼쪽 또는 전체 오른쪽 측면에 50 ~ 100 픽셀 정도의 공백이 있습니다.

css 규칙이 flexslider.css (특히 2.2.0 버전) 내에서 변경되었습니다. 탐색 화살표가 숨겨져 표시되는 방식 (특히 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;} 
} 

:

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

내가 미디어 쿼리를 사용하여 화살표 관련하여 다음 css을 제거 : 나는 변경

은/그들이 영구적으로 만들고, 화살표가 표시되는 방법에 대한 몇 가지 CSS를 합병 공백 문제도 여기서 잘 논의된다. https://drupal.org/node/1695136

Answer 3

CSS 일 수 있습니다. 이미지에 max-width: 100%; height: auto을 추가하십시오.

Answer 4

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

구성에이 줄을 추가하면 올바르게 작동합니다.