Jquery 컨베이어에서 초점이 맞춰진 항목의 높이를 동적으로 변경하는 방법은 무엇입니까?

Question

요약 -

나는 Jcarousel jquery plugin을 사용하여 항목 목록을 탐색합니다. 이러한 항목은 우리가 장소 전체에서 찾을 수있는 대부분의 예제에 따라 이미지/그림이 아닙니다. 내 항목은 게시물이며 높이가 다를 수 있습니다. 여러 시도에도 불구하고 올바르게 할 수는 없습니다. 나는 그것이 작동하지 수 있지만

HTML 구조

 <div class="div1">   
      <div class="div2"> 
       <div class="jcarousel"> 
        <ul> 
         <li> 
          <div class="item">ITEM 1</div>div> 
         </li> 
         <li> 
          <div class="item">ITEM n</div>div> 
         </li> 
        </ul> 
       </div> 
       <a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
       <a href="#" class="jcarousel-control-next">&rsaquo;</a> 
      </div> 
     </div> 

<ul>의 각 항목은 서로 다른 높이를해야합니다. <div class="jcarousel">이 각각 <li> 안에있는 <div> 높이에 따라 동적으로 높이를 변경하기를 원합니다.

CSS

 .div1 { 
     height: auto; 
     background: none repeat scroll 0% 0% rgb(255, 255, 255); 
     border-width: medium 1px 1px; 
     border-style: none solid solid; 
     border-color: -moz-use-text-color rgb(255, 255, 255) rgb(255, 255, 255); 
     padding: 20px 20px 0px; 
     margin-bottom: 50px; 
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.46); 
    } 

    .div2 { 
     margin-top: -50px; 
    } 

    .jcarousel { 
     position: relative; 
     overflow: hidden; 
     height: 700px; 
     margin: 0px -20px; 
     padding: 0px 20px; 
    } 

    .jcarousel ul { 
     width: 20000em; 
     position: absolute; 
     list-style: none outside none; 
     margin: 0px; 
     padding: 0px; 
    } 


    .jcarousel li { 
     float: left; 
     width: 480px; 
    } 

    .item { 
     margin: 0px; 
     padding: 0px 20px; 
     height: 100%; 
    } 

JS는 (높이 문제를 극복하려고합니다. 확실하지 않음이 코드 조각이 어떻게 든 Jcarousel.js가. 불행하게도이 그냥 가끔 제대로 높이를 변경 영향을합니다. 시간의 대부분은 유지하는 경우 이전의 높이,

 <script type="text/javascript"> 
     $(document).ready(function(){ 


       // checking the height of the first element in the <ul> 
      var count = 0; 
      var count_max = $(".jcarousel li").length; 


      var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height(); 
      $(".jcarousel").height(initial_height); 


      // changing height when pressing the prev control 
      $(document).on("click",".jcarousel-control-prev", function(){ 
       if (count == 0) { 

       } else { 
        count = count-1; 
        var new_count = $(".jcarousel li:eq("+count+") div.item").height(); 
        $(".jcarousel").height(new_count); 
       } 
      }); 

      // changing height when pressing the next control 
      $(document).on("click",".jcarousel-control-next", function(){ 
       if (count !== count_max) { 
        count = count+1; 
        var new_count = $(".jcarousel li:eq("+count+") div.item").height(); 
        $(".jcarousel").height(new_count); 



       } else { 
        // trying to update the counter when reach the last <li> element within the <ul> 
        count = 0; 
        var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height(); 
        $(".jcarousel").height(initial_height); 

       } 


      }); 



     }); 
     </script> 

Answer 1

어떤 일을 시도 후 나는 다음과 같은 해결책을했다 : 나는 사전에 <ul><li>의 모든 높이와 배열 만들기가 제대로 .Jcarousel div의 높이를 업데이트 할만큼 빠른 응답 것을 깨달았다

.

JS

 <script type="text/javascript"> 
      $(document).ready(function(){ 


        // checking the height of the first element in the <ul> 
       var count = 0; 
       var count_max = $(".jcarousel li").length; 


       var alturas = []; 

        $(".jcarousel li div.cenario").each(function(){ 
         var height = $(this).height(); 
         alturas.push(height); 
        }); 

       $(".jcarousel").css('height',alturas[count]); 


       // changing height when pressing the prev control 
       $(document).on("click",".jcarousel-control-prev", function(){ 
        if (count == 0) { 

        } else { 
         count = count-1; 
         $(".jcarousel").css('height',alturas[count]); 
        } 
       }); 

       // changing height when pressing the next control 
       $(document).on("click",".jcarousel-control-next", function(){ 
        if (count !== count_max) { 
         count = count+1; 
         $(".jcarousel").css('height',alturas[count]); 



        } else { 
         // trying to update the counter when reach the last <li> element within the <ul> 
         count = 0; 
         $(".jcarousel").css('height',alturas[count]); 
        } 


       }); 

      }); 
     </script> 

Answer 2

가 상위 DIV에 overflow:auto를 사용하여 시도 해 봤나) 잘못된 방법으로 다시, 또는 변경을 유지?

Answer 3

이 오래된 질문이지만, 어쩌면 누군가는 유용하게 찾을 수 있습니다.

var carousel = $('.carousel'); 

carousel.on('jcarousel:reload jcarousel:create', function() { 
    /* set carousel's height basing on the first item */ 
    $(carousel._element).height(carousel.jcarousel('items').eq(0).height()); 
}).on('jcarousel:targetin', 'li', function(event, carousel) { 
    /* reset carousel's height and set a new value basing on the active element's height */ 
    $(carousel._element).height('auto').height($(this).height()); 
}).jcarousel({ 
    wrap: 'circular' 
});