$(...).owlCarousel is not a function Error:

[gwsampso]

Hello,

Using webpack and i get the above error?

In my index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

I have imported { OwlModule } from 'ng2-owl-carousel'; in my app.module.ts

Then in my component i have imported { OwlCarousel } from 'ng2-owl-carousel';

and finally my HTML

<owl-carousel [options]="{items: 3, dots: false, navigation: false}" 
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" class="item" *ngFor=" let m of membersslider ;let i = index">
    <img alt="" [attr.src]='m.teamMemberPhoto' />
</div>
</owl-carousel>

Any ideas why its throwing this error

[mujtaba01]

You don't need to include owl carousel 2 in your index.html file. This package already includes the owl.carousel 2.2.0 and this issue is fixed in the latest release.

#install latest version
npm install --save ng2-owl-carousel@0.1.7

If somewhere in your project you have done like this then remove it

//this line would be causing the issue
import 'imports?jQuery=jquery!owl.carousel';

[gwsampso]

Thank you this did resolve the issue.

[gwsampso]

I've only reopened the issue because i'm unsure how to use the options element?

Much like your next function i tried to apply the same logic to add options

@Input() options: Object;
@ViewChild('owlElement') owlElement: OwlCarousel

fun() {

  this.owlElement.next([200]);

  this.owlElement.options = {
    loop: true,
    margin: 10,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 7,
        nav: true,
        loop: false
      }
    }
  };
}

however nothing changes...

[mujtaba01]

After making some change in options you need to call component's refresh method currently Like this:

fun() {

  this.owlElement.next([200]);

  this.owlElement.options = {
    loop: true,
    margin: 10,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 7,
        nav: true,
        loop: false
      }
    }
  };

this.owlElement.refresh();
}

[gwsampso]

confirmed working

thanks