bxslider - 슬라이드 오버랩 - 두 개의 슬라이드가 1 개의 프레임에 표시됩니다.

Question

BX 슬라이더의이 문제점으로 인해 화를 냈습니다. 나는 이것에 관해서 꽤 많은 초보자이다. 이 페이지를 참조하고 있습니다>http://jimmyhunter.co.uk/cw.html (이 문제가있는 곳도 있습니다)

처음 네 장의 슬라이드는 jpeg입니다. 모든 1200px x 803px는 BX 랩퍼의 크기입니다. 다섯 번째 슬라이드는 위의 크기를 채우지 않는 MP4 비디오입니다. 다음은 비디오 하단에 슬라이드 1 번 상단을 표시합니다 (이 경우 인트로 텍스트가 포함 된 JPEG)

다음 슬라이드에도 유사한 비디오가 있지만 첫 번째 비디오에서만 '슬라이드 오버랩'이 발생합니다. 내가 시도 중이 슬라이드를 작동하거나 수정하지 않고

모든 다음 동영상에 문제를 푸시합니다.

사전에 감사합니다. 당신이 더 많은 정보가 필요하면, 내가 어떤 아이디어가 감사받은 을 알려 주시기 바랍니다.

Answer 1

슬라이더 세트에 비정상적인 코드 조각을 발견했습니다. 피. 당신이 당신의 슬라이더의 소스 코드를 보면 당신은 주변의 라인 89에이 코드를 참조한다 : "최소 폭이"당신의 문제를 일으키는 것을

<span style="min-width:800px; display:block; margin:0 auto"><video width="640" height="360" controls> 

나는 생각한다. 그것을 없앤다. 편집 : 전체 스팬 태그와 끝내고, 라인 주변에는 </span> 태그가 붙어있다. 나머지 비디오와 마찬가지로 비디오 태그에서 width="640" height="360"을 꺼낸다.

나는 크롬 DevTools로에서 이런 짓을 다음과 같은 결과를 얻었다 :

http://picpaste.com/pics/Screen_Shot_2014-05-22_at_12.38.11-j7DM4t7S.1400758772.png

희망하는 데 도움이! 당신은 아래의 구조를 따르는 경우

Answer 2

정확히 여기에 내가 생각하는 문제 만 를 표시하지 않은 그 것이다

HTML

<div class="slider"> 
    <ul> 
     <li>your video</li> 
     <li><img>.....</img></li> 
     <li><img>.....</img></li> 
     <li><img>.....</img></li> 
     <li>your video</li> 
     <li><img>.....</img></li> 
     <li><img>.....</img></li> 
     <li>your video</li> 
    </ul>  
</div> 

CSS는 당신에게 도움이

.slider{float:left:width:100%;} 
.slider ul,.slider ul li,.slider ul li img,.slider ul li video,.slider ul li iframe{float:left:width:100%;} 

* 전체 너비 sli를 사용하는 경우 완벽하게 작동합니다. 데르 아니라 전체 폭 다음 고정 폭 컨테이너를 포장하는 경우

Answer 3

HTML

<div class="bxslider"> 
    <ul> 
     <li><img src="img1.jpg"></img></li> 
     <li><img src="img2.jpg"></img></li> 
    </ul>  
</div> 

CSS

모든 요소가 숨겨집니다

.bxslider li{display:none;} 

, 표시됩니다 만 현재는 bxslider는 인라인 CSS를 사용하여 현재 슬라이드를 표시합니다. 그것은 작동해야합니다.