Vue-Agile轮播仅显示一张幻灯片

Question

我正在使用以下模板使用vue-agile轮播：

  <agile class="bg-teal-500 main" v-if="isSlideLoaded"
           ref="main"
           :options="options1"
           :as-nav-for="asNavFor1">
        
           <div class="slide" v-for="(cat, index) in cats" :key="index" :class="`slide--${index}`">
                test-{{index}}
        </div>
    </agile>

和此数据：

 data: function () {
        return {
            isSlideLoaded: false,
            asNavFor1: [],
            cats: {},
            options1: {
                dots: true,
                fade: true,
                initialSlide:2,
                autoplay:true,
                navButtons: true,
                slidesToShow: 3,
                responsive: [
                    {
                        breakpoint: 600,
                        settings: {
                            dots: false,
                            slidesToShow: 2,

                        }
                    },

                    {
                        breakpoint: 900,
                        settings: {
                            navButtons: false,
                            dots: true,
                            slidesToShow: 4,
                            infinite: false
                        }
                    }
                ]
            },
            slides: []
        }
    },

安装该组件后，它将加载cat并对其进行更新，然后显示敏捷组件在其上起作用...但是...

每页只看到一张幻灯片。自动播放有效，因此我可以一张一张看每一张幻灯片。我还注意到每张幻灯片的不透明度会自动从0更新为1。

似乎它忽略了“ slidesToShow：3”选项。我还尝试将其应用为：slidesToShow = 3作为v-bind组件。

我错过了什么？

感谢您的帮助