5

I am trying to use the slick slider in a .vue component but I get an error.

.slick is not a function

I have made all the setup requirements. This is the code am using:

    new Vue({
    el: '#app',
    data: {
        slider: null
    },
    methods: {
        selectImage: function () {
            //http call here
            return images
        }
    },
    mounted: function () {
        this.slider = $('.gallery').slick({
            animation: true
        });
    }
});

<div class='gallery'>
  <div v-for="img in images" @click="selectImage(img)">
    <img v-bind:src="img.url">
  </div>
</div>

My phpstorm does not allow ES6 and am suspecting that it might be the issue.

Here is a fiddle with my code: JSfiddle

5
  • I hope this is the last carousel you'll ever need :P Possible to create a fiddle of it?
    – Saurabh
    Commented Jan 23, 2017 at 6:22
  • I used the foundation orbit but it does not work with dynamically loaded images using v-for. Looking for a slider that does is a nightmare Commented Jan 23, 2017 at 6:23
  • Have you added this line in your HTML/index.html: <script type="text/javascript" src="slick/slick.min.js"></script>
    – Saurabh
    Commented Jan 23, 2017 at 6:24
  • Yes. I have. I have also added the slick.css file Commented Jan 23, 2017 at 6:26
  • Here is an implementation of carousel with bootstrap for your reference and here is for slick, Can you please create a fiddle for your code, which can help people answer here your question.
    – Saurabh
    Commented Jan 23, 2017 at 6:33

1 Answer 1

3

You can see the working fiddle here.

I am not getting the error you are getting. However it was not working earlier as the code: $('.gallery').slick({ was defined in mount block, but given that you are getting the data in async way, I have moved this to updated block which will be executed after your data is updated.

Following is working vue code:

var app = new Vue({
  el: "#gallery",
  data: function() {
    return {
      images: [],
      slider: null
    }
  },
  mounted() {
    var that = this
    setTimeout(function() {
      that.images.push('http://devcereal.com/wp-content/uploads/2016/05/URL-URI-URN-whats-difference.png')
      that.images.push('http://www.shawacademy.com/blog/wp-content/uploads/2015/10/URL-1000x605.jpg')

    }, 300)
  },
  updated () {
        $('.gallery').slick({
        autoplay: true,
        dots: true,
        responsive: [{
          breakpoint: 500,
          settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
          }
        }]
      });
  }
})
4
  • @PhillisPeters Than there is some issue in your code, it may be not loading slick.js properly.
    – Saurabh
    Commented Jan 24, 2017 at 6:30
  • It did not load the slick.js when I used bower components and add the script tag in my page so I used npm to install slick, added the css files to my gulpfile and now it works like a charm. Thanks a lot. Commented Feb 1, 2017 at 7:29
  • @Saurabh your solution helped me run slick but there is one more problem i have and it is that the navigation arrows are not showing at their proper position. so can you help me find out the issue Commented Mar 14, 2017 at 5:41
  • @Saurabh, Seems I need you help. Look at this : stackoverflow.com/questions/45255934/…
    – moses toh
    Commented Jul 23, 2017 at 5:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.