CODEWITHSUNDEEP
vuejs2owl-carousel-2
Jhon Lemmon
Jhon Lemmon

Reputation: 113

Vue component $(...).owlCarousel is not a function

I have the next issue.

I'm using Laravel 5.4 with vue components. I want to use owl carousel 2 in my app.

I have the next code in a script tag and it works:

$(".owl-1").owlCarousel({items: 1, singleItem:true, loop: true});

$(".owl-2").owlCarousel({items: 1, singleItem:true, loop: true,mouseDrag: false, touchDrag: false, pullDrag: false, freeDrag: false});

$(".owl-1").on('change.owl.carousel', function(event) {
 if (event.namespace && event.property.name === 'position') {
 var target = event.relatedTarget.relative(event.property.value, true);
     $(".owl-2").owlCarousel('to', target, 300, true);
 }
});

When I load the page when it is my owl html structure works very well, but when I try to use owl carousel inside my vue component it show me the next error.

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

I have the next code on the bottom of my html

<script src="/assets/js/owl.carousel.min.js"></script>
<script src="/assets/js/main.js"></script>

I'm don't know if I need to intall it with npm, I was looking in npm and I didn't find it then I add the css and js files in my assets files.

Any ideas? Thanks in advance.

Upvotes: 1

Views: 4259

Answers (2)

Jhon Lemmon
Jhon Lemmon

Reputation: 113

I solved this in the next way:

I checked the link who aks gave me, thanks for that.

I declared in my watch poperty the name of my v-model that in my case was houses, and in my created method I call the values from an api and in my watch detects the change and then I initialized the owl carousel with window. before the jquery selector.

Also I add the import of owl.carousel

import 'owl.carousel'

export default {

data(){
 return {
     houses: []
   }
 },
created(){

  //Call api
  this.houses = response.data.houses;
},
watch: {

        /*
            Carousel Structure
         */
        houses() {

            let owl  = window.$(".owl-1");
            let owl2 = window.$(".owl-2");

            owl.owlCarousel({items: 1, singleItem:true, loop: true});;

            owl2.owlCarousel({items: 1, singleItem:true, loop: true,mouseDrag: false, touchDrag: false, pullDrag: false, freeDrag: false});
        }
    }
  }

I hope helps to someone else.

Upvotes: 2

aks
aks

Reputation: 9491

I think this is what you are looking for:

https://www.npmjs.com/package/owl.carousel

They also have instruction about using it with webpack, hope that helps!

Upvotes: 2

Related Questions