0

I have built carrousel using Bootstrap 3 js code. It consists of 3 slides divided in 5 columns(products). Each column contains multiline text description that I wanted to partially hide ending with some sort of ellipsis. And it all works perfectly well on first screen:

firstScreen

Issue happens when I click next arrow and next 5 items appear:

secondScreen

As you can see, jquery Ellipsis plugin that I have used (http://pvdspek.github.io/jquery.autoellipsis/) isn't getting applied to Description text and size text.

I have applied it using jQuery document ready but somehow only visible elements get affected???

Thank you

daniel.tosaba
  • 2,503
  • 9
  • 36
  • 47
  • I'm late the game but see @SpencerWieczorek's solution in: http://stackoverflow.com/questions/24375304/jquery-dotdotdot-plugin-adds-ellipsis-not-working-with-bootstrap-carousel – Vee Jun 24 '14 at 14:03

2 Answers2

0

Please add some code to your question too.

Check the carousel events on http://getbootstrap.com/javascript/#carousel-usage.

Try:

$('#myCarousel').on('slid.bs.carousel', function () {
  $('.yourelements').ellipsis();
})
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • I'm having the same problem described by @daniel.tosaba; however, I'm using the jquery dotdotdot plugin. Using your recommendation isn't suitable because the entire contents of .yourelements is displayed for a brief moment before the ellipsis executes. Per your request, I've created a jsfiddle that illustrates the problem: http://jsfiddle.net/michaelvli/GD3JH/9/ – Vee Jun 24 '14 at 02:16
  • I've posted my question on stackoverflow as well: http://stackoverflow.com/questions/24375304/jquery-dotdotdot-plugin-adds-ellipsis-not-working-with-bootstrap-carousel – Vee Jun 24 '14 at 02:22
0

I think it is useful the inside of the sample can optimize your design.

<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

Hasan Ali
  • 1