Question

我使用Bootstrap 3 js代码构建了carrousel。它由3个幻灯片组成，分为5列（产品）。每列包含多行文本描述，我想部分隐藏以某种省略号结尾。这一切都在第一个屏幕上完美运行：

firstScreen

当我点击下一个箭头时出现问题，然后出现下面的5个项目：

secondScreen

正如您所看到的，我使用的jquery Ellipsis插件（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

jquery省略号和bootstrap 3轮播

2 个答案: