0

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

第一屏

当我单击下一个箭头并出现下 5 个项目时会出现问题：

第二屏

如您所见，我使用过的 jquery Ellipsis 插件 ( http://pvdspek.github.io/jquery.autoellipsis/ ) 没有应用于描述文本和大小文本。

我已经使用准备好的 jQuery 文档应用了它，但不知何故只有可见元素受到影响？？？

谢谢

4

2 回答 2

0

请在您的问题中添加一些代码。

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

尝试：

$('#myCarousel').on('slid.bs.carousel', function () {
  $('.yourelements').ellipsis();
})
于 2013-10-18T18:51:08.857 回答
0

我认为样本内部可以优化您的设计很有用。

<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">‹&lt;/a>

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

http://bootply.com/81478

于 2013-11-05T23:07:59.203 回答