deck.js의 중첩 슬라이드 용 회전식 메뉴

Question

프리젠 테이션에 deck.js가 사용됩니다. 한 슬라이드의 경우, 캐 러셀을 통해 그림/이미지가 포함 된 고정 헤더를 원합니다. deck.js.와 함께 제공되는 수평 슬라이드 테마로 한이 작품을 만들기 위해 deck.js하는 JS 내가 추가 한 것 여기

<section class="carousel slide"> 
    <h2>Static Title</h2> 
    <figure class="slide"><figcaption>Text for first image</figcaption><img src="images/first_image.png" alt=""></figure> 
    <figure class="slide"><figcaption>Text for second image</figcaption><img src="images/second_image.png" alt=""></figure> 
    <figure class="slide"><figcaption>Text for third image</figcaption><img src="images/third_image.png" alt=""></figure> 
</section> 

을 그리고 다음은 관련 HTML입니다

.carousel .deck-before { 
    -webkit-transform: translate3d(-400%, 0, 0); 
    -moz-transform: translate(-400%, 0); 
    -ms-transform: translate(-400%, 0); 
    -o-transform: translate(-400%, 0); 
    transform: translate3d(-400%, 0, 0); 
    height:0; 
} 

.carousel .deck-after { 
    -webkit-transform: translate3d(400%, 0, 0); 
    -moz-transform: translate(400%, 0); 
    -ms-transform: translate(400%, 0); 
    -o-transform: translate(400%, 0); 
    transform: translate3d(400%, 0, 0); 
    height:0; 
} 

.carousel .deck-next { 
    -webkit-transform: translate3d(200%, 0, 0); 
    -moz-transform: translate(200%, 0); 
    -ms-transform: translate(200%, 0); 
    -o-transform: translate(200%, 0); 
    transform: translate3d(200%, 0, 0); 
    height:0; 
} 

.carousel .deck-previous { 
    -webkit-transform: translate3d(-200%, 0, 0); 
    -moz-transform: translate(-200%, 0); 
    -ms-transform: translate(-200%, 0); 
    -o-transform: translate(-200%, 0); 
    transform: translate3d(-200%, 0, 0); 
    height:0; 
} 

이 기능은 이미지 회전식 캐릭이 진행될 때 유용합니다. 그러나 뒤로 돌아 가면 화면에서 벗어나는 이미지가 아래로 이동하여 새 이미지가 들어오는 지점 아래에있게됩니다.

화면 오른쪽에서 벗어난 이미지가 화면 왼쪽에서 오는 이미지와 수평을 이루도록하려면 어떻게해야합니까?

Answer 1

height이 전환되지 않으므로 클래스 변경이 일어나는 순간에 이전 요소가 즉시 높이를 가졌으나 여전히 전환되지 않은 슬라이드는 아래로 내려갑니다.

이것은 해결할 fairly tough problem입니다. 필요에 따라 선택해야합니다.

먼저, 이전/이후/이전/다음 각각에서 height:0을 꺼내서 .carousel .slide { height: 0 }라고 말하면됩니다.

회전하려면 deck.scale 확장 프로그램이 필요합니까, 아니면 회전식 슬라이드 이후 슬라이드 콘텐츠가 있습니까? 그렇다면 .carousel을 보상해야합니다.

미리 높이를 알고 있습니까? 그냥 CSS에서 설정하십시오.

높이를 모르거나 매번 손으로 높이를 설정하지 않고도이 모든 것을 사용하고 싶습니까? 캐 러셀 내용을 확인하고 높이를 설정하는 작은 스크립트를 작성하십시오. (테스트되지 않은, 조심) 이런 식으로 뭔가 :

$(window).load(function() { 
    $('.carousel').each(function(carousel) { 
    var $carousel = $(carousel); 
    var maxHeight = 0; 

    $carousel.each(function() { 
     var height = $(this).height(); 
     maxHeight = Math.max(height, maxHeight); 
    }); 

    $carousel.height(maxHeight); 
    }); 
}); 

같은 스크립트와는 완전히 CSS에서 height:0 선언을 제거해야합니다.