jquery ellipsis和bootstrap 3 carrousel

我已經使用Bootstrap 3 js代碼構建了卡魯塞爾。它由3列分成5列（產品）的幻燈片組成。每列包含多行文本描述，我想部分隱藏以某種省略號結尾。而這一切都工作得很好第一屏幕上：當我點擊下一個箭頭和未來的5項出現jquery ellipsis和bootstrap 3 carrousel

firstScreen

問題發生：

secondScreen

正如你所看到的，jQuery的省略號插件我已經使用（http://pvdspek.github.io/jquery.autoellipsis/）未應用於描述文本和大小文本。

我已經應用它使用jQuery文檔準備好但不知何故只有可見的元素受到影響？

謝謝

來源

2013-10-17 daniel.tosaba

我遲到了比賽，但看到@ SpencerWieczorek的解決方案：http://stackoverflow.com/questions/24375304/jquery-dotdotdot-plugin-adds-ellipsis-不工作用bootstrap旋轉木馬 – Vee

請添加一些代碼到你的問題了。

檢查http://getbootstrap.com/javascript/#carousel-usage上的輪播事件。

嘗試：

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

來源

2013-10-18 18:51:08

我有@ daniel.tosaba描述的相同的問題;不過，我正在使用jquery dotdotdot插件。使用你的推薦是不合適的，因爲在省略號執行之前，.yourelements的全部內容會短暫顯示。根據你的請求，我創建了一個jsfiddle來說明問題：http://jsfiddle.net/michaelvli/GD3JH/9/ – Vee

我已經發布了我的問題在stackoverflow以及：http://stackoverflow.com/questions/24375304/jQuery的dotdotdot - 插件 - 增加 - 省略號 - 不工作，用自舉傳送帶 – Vee

我認爲這是非常有用的樣品裏面可以優化您的設計。

<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

來源

2013-11-05 23:07:59

jquery ellipsis和bootstrap 3 carrousel

回答

相關問題