Twitter Bootstrap Carousel Crossfade

Вообще-то мне не очень понятно, почему в carousel не заложили в опции выбор эффекта, как в Nivo Slider, например.

1 вариант (не дописывая класс у div карусели):

Используем такой LESS сниппет в стилях сайта, чтобы переопределить поведение бутстраповской карусели по-умолчанию на crossfade переход.

.carousel {
  .item {
    .transition(.7s ease-in-out opacity);
    left: 0 !important;
  }
  .next.left, .prev.right {
    opacity: 1;
    z-index: 1;
  }
  .active.left, .active.right {
    opacity: 0;
    z-index: 2;
  }
} 

что соответствует css (если не используем LESS)

.carousel .item {
  -webkit-transition: 0.7s ease-in-out opacity;
  -moz-transition: 0.7s ease-in-out opacity;
  -o-transition: 0.7s ease-in-out opacity;
  transition: 0.7s ease-in-out opacity;
  left: 0 !important;
}
.carousel .next.left,
.carousel .prev.right {
  opacity: 1;
  z-index: 1;
}
.carousel .active.left,
.carousel .active.right {
  opacity: 0;
  z-index: 2;
}         

2 вариант (определить свой класс):

.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      transition-property: opacity;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}

что соответствует css:

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
} 

но надо ещё в вызове карусели добавить этот класс carousel-fade (делаю для Yii - а конкретно под Yiistrap)

<?php echo TbHtml::carousel(array(
    array('image' => '/web/images/pics/nivo0.jpg', 'label' => 'First Thumbnail label <a href="/registration" class="btn btn-primary btn-large">Зарегистрироваться</a>', 'caption' => 'Инфофорум 2014'),
    array('image' => '/web/images/pics/nivo1.jpg', 'label' => 'First Thumbnail label', 'caption' => 'Инфофорум 2014'),
    ...
), $htmlOptions = array('class'=>'carousel-fade')); ?>

что соответствует html коду

<div class="carousel-fade carousel slide" id="yt0">
<ol class="carousel-indicators">
...