vue轮播组件_光滑轮播的Vue组件

vue轮播组件

适用于Vue.js (Slick for Vue.js)

Vue component for Slick-carousel.

Slick轮播的Vue组件。

Vue支持 (Vue support)

Supports only Vue >= 2

仅支持Vue> = 2

安装及使用 (Installation and usage)

See official documentation here.

请参阅此处的官方文档。

$ npm install vue-slick

NOTE: slick-carousel official package appears to use jquery as a dependency in package.json, despite it would be more appropriate to use it as a peer dependency to avoid possibility of using multiple versions of jquery. Be aware of that. When using webpack you can solve this problem with aliases.

注意 ： slick-carousel官方软件包似乎将jquery用作package.json中的依赖项，尽管将其用作对等依赖项更合适，以避免使用多个版本的jquery的可能性。 注意这一点。 使用webpack ，可以使用别名解决此问题。

import Slick from 'vue-slick';

new Vue({

    components: { Slick },

    data() {
        return {
            slickOptions: {
                slidesToShow: 3,
                // Any other options that can be got from plugin documentation
            },
        };
    },

    // All slick methods can be used too, example here
    methods: {
        next() {
            this.$refs.slick.next();
        },

        prev() {
            this.$refs.slick.prev();
        },

        reInit() {
            // Helpful if you have to deal with v-for to update dynamic lists
            this.$nextTick(() => {
                this.$refs.slick.reSlick();
            });
        },
    },
});

<slick ref="slick" :options="slickOptions">
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
</slick>

If you need, you can import slick styles too:

如果需要，您也可以导入光滑样式：

import `node_modules/slick-carousel/slick/slick.css`;

翻译自: https://vuejsexamples.com/vue-component-for-slick-carousel/

vue轮播组件