jquery 줄임표 및 부트 스트랩 3 회전판

Question

부트 스트랩 3 js 코드를 사용하여 회전식 구조를 만들었습니다. 5 개의 열 (제품)으로 나뉘어 진 3 개의 슬라이드로 구성됩니다. 각 열에는 여러 줄로 된 텍스트 설명이 포함되어 있으며 일부는 줄임표로 끝나는 것을 부분적으로 숨기고 싶습니다. 내가 옆에있는 화살표를 클릭 한 다음 5 개 항목이 나타날 때

문제가 발생합니다 : 그리고 그것은 모두가 첫 화면에 완벽하게 잘 작동하면, JQuery와 줄임표 플러그인을 볼 수 있듯이

그 나는 (http://pvdspek.github.io/jquery.autoellipsis/) 설명 텍스트와 크기 텍스트에 적용되지 않습니다.

jQuery 문서를 사용하여 적용했지만 어쨌든 보이는 요소 만 영향을받습니다 ???

고맙습니다.

Answer 1

질문에 코드를 추가해주십시오.

http://getbootstrap.com/javascript/#carousel-usage에서 회전식 이벤트를 확인하십시오.

시도 : 나는 당신의 설계를 최적화 할 수있는 샘플의 내부 유용하다 생각

$('#myCarousel').on('slid.bs.carousel', function() { 
    $('.yourelements').ellipsis(); 
}) 

Answer 2

.

<div class="container"> 
<div class="col-md-12"> 
    <h1>Bootstrap 3 Thumbnail Slider</h1> 

    <div class="well"> 
     <div id="myCarousel" class="carousel slide"> 

      <!-- Carousel items --> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <div class="row"> 
         <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
         </div> 
        </div> 
        <!--/row--> 
       </div> 
       <!--/item--> 
       <div class="item"> 
        <div class="row"> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
        </div> 
        <!--/row--> 
       </div> 
       <!--/item--> 
       <div class="item"> 
        <div class="row"> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
         <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
         </div> 
        </div> 
        <!--/row--> 
       </div> 
       <!--/item--> 
      </div> 
      <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 

      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
     </div> 
     <!--/myCarousel--> 
    </div> 
    <!--/well--> 
</div> 

http://bootply.com/81478