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.