A simple way to integrate external controls to Bootstrap carousel

main.js

/**
 * Just an object used for name spacing
 */
var agitaLab = {};

/**
 * Two ways binding between an external "carousel-control like"
 * element and the carousel slides.
 * Remember to add data-item-no to your carousel :)
 */
agitaLab.sliderExternalControl = function () {
    var elements = jQuery(this);
    var activeClass = 'active';
    var controls = jQuery('[href="#' + elements.attr('id') + '"], [data-target="' + elements.attr('id') + '"]');
    elements.each(
        function () {
            var element = jQuery(this);
            element.on(
                'slide.bs.carousel', function (event) {
                    var currentItemTo = jQuery(event.relatedTarget).attr('data-item-no');
                    console.log(event, event.relatedTarget, currentItemTo);
                    controls.each(
                        function () {
                            var control = jQuery(this);
                            if (control.data('slide-to') == currentItemTo) {
                                control.addClass(activeClass);
                            } else {
                                control.removeClass(activeClass);
                            }
                        }
                    );
                }
            );
        }
    );
};

agitaLab.onReady = function () {
    agitaLab.sliderExternalControl.call(jQuery('#carousel-home-1'));
};

jQuery(document).ready(agitaLab.onReady);