javascript - chop Twitter Bootstrap 轮播的文本

Question

我想 chop Bootstrap 轮播 .carousel-caption 元素的文本。我正在使用 shave.js chop 文本。但是， chop 仅适用于第一个 .carousel-caption 元素。

我创建了一个 jsfiddle 来演示我的问题:jsfiddle

当我从轮播中删除 CSS 类 carousel-inner 时， chop 在 booth .carousel-caption 元素上完美运行。

Answer 1

我不太确定这个问题，但我认为这是由于旋转木马的动态行为造成的，因此剃须代码仅适用于第一个字幕，因为它是可见的并且它的高度已设置因此您的代码也应该是动态的，以便为每张幻灯片调用剃须功能。

一个想法是使用轮播组件提供的事件并在那里调用剃须功能。

$('#carousel-example-generic').on('slid.bs.carousel', function () {
  $(".carousel-caption").shave(70);
})

slid.bs.carousel : This event is fired when the carousel has completed its slide transition. ^ref

完整代码:https://jsfiddle.net/dpnpo4o7/2/

---

我在上面的代码中使用了插件的 jQuery 版本，但它与 JS 版本的工作方式相同:

$('#carousel-example-generic').on('slid.bs.carousel', function () {
  shave(".carousel-caption", 70);
})

完整代码:https://jsfiddle.net/dpnpo4o7/3/