$ is not a function in drupal 7 theme $(function(){
  $('.slider').mobilyslider({
    content: '.sliderContent',
    children: 'div',
    transition: 'horizontal',
    animationSpeed: 500,
    autoplay: true,
    autoplaySpeed: 9000,
    pauseOnHover: true,
    bullets: true,
    arrows: true,
    arrowsHide: true,
    prev: 'prev',
    next: 'next',
    animationStart: function(){},
    animationComplete: function(){}
  });   
});


I am integrating the above JavaScript file in a Drupal theme, but it is giving me the "$ is not function" error. I googled it, and changed the code bro the below, but it doesn't work either.

(function($) {
  $('.slider').mobilyslider({
    content: '.sliderContent',
    children: 'div',
    transition: 'horizontal',
    animationSpeed: 500,
    autoplay: true,
    autoplaySpeed: 9000,
    pauseOnHover: true,
    bullets: true,
    arrows: true,
    arrowsHide: true,
    prev: 'prev',
    next: 'next',
    animationStart: function(){},
    animationComplete: function(){}
  });   
})(jQuery);


The above code gives me following error:


  $('.slider').mobilyslider is not a function
The first error you were getting was because $ isn't defined as jQuery in Drupal 7, to avoid conflicts with other libraries. Adding the closure fixed that, as in your second code example.

As long as the mobilyslider library is definitely loaded into the page, the problem is probably that you're attaching the event before the DOM is ready...so the elements you're trying to attach to don't exist yet.

You could use the standard $(document).ready() method to solve this if you want to, or else use Drupal JS behaviours. For Drupal 7 that code would look like this:

(function($){
  Drupal.behaviors.mymodule = {
    attach: function(context, settings) {
      $('.slider', context).mobilyslider({
        content: '.sliderContent',
        children: 'div',
        transition: 'horizontal',
        animationSpeed: 500,
        autoplay: true,
        autoplaySpeed: 9000,
        pauseOnHover: true,
        bullets: true,
        arrows: true,
        arrowsHide: true,
        prev: 'prev',
        next: 'next',
        animationStart: function(){},
        animationComplete: function(){}
      });
    }
  };
})(jQuery);


Be sure to pass in context to your jQuery selector for reusability.

See Managing JavaScript in Drupal 7 for more info.