Data API implementation of carousel conflicts with custom components

Created by: witrin

The data API design for carousel seems to be good enough for the integration of custom slider components (data-ride="your-slider", data-slide, data-slide-to) with another CSS prefix (your-slider, your-slider-indicator, your-slider-controls, your-slider-inner etc.). Unfortunately the current implementation of the data API of carousel doesn't allow custom slider components side by side. In my opinion the corresponding CSS class/prefix (carousel, your-slider etc.) is necessary for the respective component. So I have to patch the event handler click.bs.carousel.data-api to make this scenario working:

+function($) {
  'use strict';

  $(document).off('click.bs.carousel.data-api')
    .on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
    var $this   = $(this), href
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    // make sure only carousel markup gets affected
    if (!$target.hasClass('carousel')) return

    $target.carousel(options)

    if (slideIndex = $this.attr('data-slide-to')) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  })
}(jQuery);

I know Bootstrap doesn't support third party plugins. But I think as a framework Bootstrap should allow me to integrate custom components in a clean way.