Using drupal behaviors for a Bootstrap carousel

Question

I created a custom front page using page--front.tpl.php, and I added a Bootstrap carousel on it which works fine, but the javascript I have (carou.js which is in mysubtheme'/js/carou.js') is not called. This is the Drupal behavior code.

(function ($) {
Drupal.behaviors.carou = {
    attach: function(context, settings) {
        $('#myCarousel').carousel({
            pause: false,
            interval: 3000,
        });
    }
}       
})(jQuery);

I added it using the following code in the template.php file.

function bootstrap_subtheme_preprocess_page($vars) {
  if (drupal_is_front_page()) {
     drupal_add_css(drupal_get_path('theme', 'bootstrap_subtheme') . "/css/frontpage.css");
   //adding carou.js to front page
     drupal_add_js(drupal_get_path('theme', 'bootstrap_subtheme') . '/js/carou.js', 'file');
   }
}

I want to control the carousel options of pause: false interval:3000 but I was not able to do so. This makes me think the JavaScript code is not being called, and I don't know what is not right in the code. I am not also very well versed with Drupal behaviors.

What is wrong in my code?

Answer 1

Finally fixed it. I modified the code this way

drupal_add_js(drupal_get_path('theme', 'bootstrap_subtheme') . '/js/carou.js', array( 
                                                                                      'type' => 'file', 
                                                                                      'group' => JS_LIBRARY, 
                                                                                      'weight' => -1)); 

I added group and weight to it then then drupal.behaviors code had some few errors in the structure. The last line was})(jQuery); But i fixed it to }(jQuery));